我想更改修改布爾變量的列數。檢查我的例子（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只是一個包含所有數據的控制表。

來源

2017-08-16 Soldeplata Saketos

如果您修改了其hideField屬性的值，則您的標題將變爲可見。但是你沒有那樣做。您正在修改$scope.debug.flag的值。

是hideField用的$scope.debug.flag值初始化，就不會在每次你改變$scope.debug.flag時間幻化hideField的事實。

只是如果你

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

像b值仍然是1.不是42

來源

2017-08-16 15:42:07

這發生在基本類型，而不是對象： 'let a = {x：1}，b = a; a.x = 42; '和b.x將是42 –

當然，但這不是你在做什麼。 hideField不會引用您更改屬性的對象，如您的示例中的「b」。它引用一個布爾值。但是在你的評論中做你的建議確實是修復你的代碼的一種方法。 –

然後，修改字段的變量fields.hideField來指向一個對象而不是一個值並修改在ng-if中被跟蹤的屬性，將會解決一些優雅的問題！ [在這裏你可以看到解決方案]（https://plnkr.co/edit/DcAUKs2u5BmpXk3ehFpz?p=preview） –

改變的$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>

這不是一個乾淨的解決方案，但。但是，仍然會解決你的問題。

來源

2017-08-16 15:59:46

我想幹淨的解決方案 –

我找到了。我會盡快更新。感謝您的貢獻 –

[這裏更多（可能不是最多的）優雅的解決方案]（https://plnkr.co/edit/DcAUKs2u5BmpXk3ehFpz？p =預覽） –

如何更新角度表中的列數

如何重現它：

預期的行爲：

回答

相關問題