【问题标题】：How to update the number of columns in an angular table如何更新角度表中的列数
【发布时间】：2017-08-17 00:10:19
【问题描述】：

我想在修改布尔变量时更改列数。查看我的示例 (in plnkr)：

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('myCtrl', function($scope, $log) {
  $scope.debug = {};
  $scope.fields = [{
      header: "first",
      hideField: !$scope.debug.flag
    },
    {
      header: "second"
    },
    {
      header: "third"
    },
    {
      header: "fourth"
    },
  ];
  $scope.entries = [{
    first: "hello1",
    second: "hello2",
    third: "hello3",
    fourth: "hello4"
  }, ]
  $scope.myBool = true;
});

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div ng-controller="myCtrl">
    <button id="testButton" class='btn btn-danger' ng-click='debug.flag = !debug.flag'><i class="glyphicon glyphicon-hand-right"></i> refreshFields! debug.flag = {{!!debug.flag}}</button>
    <hr>
    <h2 class="label label-info">table 1 with property.hideField = true</h2>
    <table class="table  table-hover">
      <tr>
        <!-- Headers of list-->
        <th ng-repeat="property in fields" ng-if="!property.hideField">{{property.header}}
        </th>
      </tr>
      <tbody>
        <tr ng-repeat="entry in entries">
          <td ng-repeat="property in fields" ng-if="!property.hideField">
            {{entry[property.header]}} {{!!debug.flag}}
          </td>
        </tr>
      </tbody>

    </table>
    <h4 class="label label-info">table 2 with ng-if => property.hideField = false</h4>
    <table class="table  table-hover">
      <tr>
        <!-- Headers of list-->
        <th ng-repeat="property in fields" ng-if="property.hideField">{{property.header}}
        </th>
      </tr>
      <tbody>
        <tr ng-repeat="entry in entries">
          <td ng-repeat="property in fields" ng-if="property.hideField">
            {{entry[property.header]}} {{!!debug.flag}}
          </td>
        </tr>
      </tbody>

    </table>
    <h2 class="label label-info">table 3 without ng-if</h2>
    <table class="table  table-hover">
      <tr>
        <!-- Headers of list-->
        <th ng-repeat="property in fields">{{property.header}}
        </th>
      </tr>
      <tbody>
        <tr ng-repeat="entry in entries">
          <td ng-repeat="property in fields">
            {{entry[property.header]}} {{!!debug.flag}}
          </td>
        </tr>
      </tbody>

    </table>
  </div>
</body>

</html>

如何重现它：

点击红色按钮，标志将从假切换为真。

预期行为：

表 1 从 3 列开始。点击后应该显示四个。
表 2 从 1 列开始。点击后它应该显示 0 列。
表 3 只是一个包含所有数据的控制表。

【问题讨论】：

标签： angularjs html-table

【解决方案1】：

如果您修改其hideField 属性的值，您的标题将变得可见。但你没有那样做。您正在修改$scope.debug.flag 的值。

hideField 被初始化为 $scope.debug.flag 的值不会在您每次更改 $scope.debug.flag 时神奇地更改 hideField。

就像你这样做

var a = 1;
var b = a;
a = 42;

b 的值仍然是 1，而不是 42。

【讨论】：

这发生在基本类型上，而不是对象上：let a = {x: 1}, b = a; a.x = 42; 和 b.x 将是 42
当然，但这不是你正在做的。 hideField 并不引用您更改属性的对象，就像您的示例中的 b 所做的那样。它指的是一个布尔值。但是按照您在评论中的建议确实是修复代码的一种方式。
然后，修改字段的变量fields.hideField 指向一个对象而不是一个值，并修改ng-if 中跟踪的属性，将优雅地解决问题！ Here you can see the solution

【解决方案2】：

更改$scope.debug.flag 的值不会更改hideField 的值。因为，它在控制器加载时已经被初始化了。您可以在此处应用的解决方法是将hideField 绑定到一个方法并在您的ng-if 中评估它。示例如下。

JS：

 $scope.fields = [{
    header: "first",
    hideField: function() {
      return !$scope.debug.flag;
    }
  }, {
    header: "second"
  }, {
    header: "third"
  }, {
    header: "fourth"
  }, ];

HTML：

<h2 class="label label-info">table 1 with property.hideField = true</h2>
<table class="table  table-hover">
  <tr>
    <!-- Headers of list-->
    <th ng-repeat="property in fields" ng-if="!property.hideField()">{{property.header}}
    </th>
  </tr>
  <tbody>
    <tr ng-repeat="entry in entries">
      <td ng-repeat="property in fields" ng-if="!property.hideField()">
        {{entry[property.header]}} {{!!debug.flag}}
      </td>
    </tr>
  </tbody>
</table>

虽然这不是一个干净的解决方案。但是，仍然会解决您的问题。

【讨论】：

我想要干净的解决方案
我找到了。我会尽快更新。感谢您的贡献
here the more (probably not the most) elegant solution
here the more (probably not the most) elegant solution