隐藏列动态依赖于复选框角度

Question

我需要隐藏行取决于复选框，使用ng-click中的myfunction来访问动态值。

＆＃13;

＆＃13;

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.myfunction = function (skip) {
		$scope.skip = !$scope.skip;
    };
});

＆＃13;

<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">
	<input type="checkbox" ng-click="myfunction(skip)" type="button" class="btn btn-success">{{skip}}</input>
</span>
	<table style="border: 1px solid ;">
		<tr>
			<td style="border: 1px solid #dddddd;" ng-hide="{{display}}" ng-repeat= "display in jsonmain">
				{{display}}
			</td>
		</tr>
	</table>
</div>

＆＃13;

＆＃13;

＆＃13;

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">
	<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>