列を動的にチェックボックスの角に依存する

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>