隱藏列動態取決於複選框的角度

Question

我需要隱藏行取決於複選框，使用ng-click中的myfunction訪問動態值。

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.firstName = "John"; 
 
    $scope.lastName = "Doe"; 
 
\t $scope.jsonmain = ["brand","checkstatus","color","fabric","fit","package contents","size","sku","style","title","type","wash care"]; 
 
\t $scope.myfunction = function (skip) { 
 
\t \t $scope.skip = !$scope.skip; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
<span ng-repeat = "skip in jsonmain"> 
 
\t <input type="checkbox" ng-click="myfunction(skip)" type="button" class="btn btn-success">{{skip}}</input> 
 
</span> 
 
\t <table style="border: 1px solid ;"> 
 
\t \t <tr> 
 
\t \t \t <td style="border: 1px solid #dddddd;" ng-hide="{{display}}" ng-repeat= "display in jsonmain"> 
 
\t \t \t \t {{display}} 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </table> 
 
</div>

Answer 1

你需要作出用來顯示或隱藏項的對象模型的一部分的標誌，但你不能這樣做，因爲直接是$scope.jsonmain字符串數組。如果您可以修改$scope.jsonmain以便它是一個對象數組，那麼您可以跳過本示例中將字符串數組加載到對象數組中的部分。

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.firstName = "John"; 
 
    $scope.lastName = "Doe"; 
 
    $scope.jsonmain = ["brand", "checkstatus", "color", "fabric", "fit", "package contents", "size", "sku", "style", "title", "type", "wash care"]; 
 
    $scope.items = $scope.jsonmain.map(function(obj) { 
 
    var newObj = { 
 
     name: obj, 
 
     display: true 
 
    }; 
 
    return newObj; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <span ng-repeat="item in items"> 
 
\t <label><input type="checkbox" ng-model="item.display" type="button" class="btn btn-success">{{item.name}}</label> 
 
</span> 
 
    <table style="border: 1px solid ;"> 
 
    <tr> 
 
     <td style="border: 1px solid #dddddd;" ng-show="item.display" ng-repeat="item in items"> 
 
     {{item.name}} 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>