Hide Spalte dynamisch abhängig von Kontrollkästchen angular

Question

Ich muss Zeilen abhängig von Kontrollkästchen, mit myfunction in ng-klicken, um dynamische Werte zugreifen.

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

Sie müssen die Flagge verwendet, um diese direkt anzeigen oder ausblenden Artikel Teil des Objektmodells, aber Sie können nicht tun, weil $scope.jsonmain ein Array von Strings ist. Wenn Sie in der Lage sind, $scope.jsonmain so zu ändern, dass es sich um ein Array von Objekten handelt, können Sie den Teil dieses Beispiels überspringen, in dem das Array von Strings in ein Array von Objekten geladen wird.

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>