Question

我有一个父复选框列表，其中包含每个父复选框内的子复选框列表。

使用父级复选框，数据信息=＆＃34;类别＆＃34;属性是附加的，带有子复选框的data-info =＆＃34; name＆＃34;属性附后。

通过选中和取消选中父复选框，子复选框列表分别可见和隐藏

我想要的是，当我取消选中父复选框时，所有subchkbx也应该取消选中。仅对未检查的方案进行取消选中。

另外，我想访问checked复选框的data-info属性。如何在检查复选框时获取此属性。

目前我在jquery的帮助下实现了这一目标。

Answer 1

您可以将复选框绑定到父项上的checked属性，然后设置$watch：当checked属性更改时，更新子项的checked属性。

＆＃13;

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
  $scope.parents = [
    { 
      name: 'parent1',
      checked: false,
      children: [{
        name: 'child1',
        checked: false
      },
      {
        name: 'child2',
        checked: false
      }]
    }];
  
    angular.forEach($scope.parents, function(item,index) {
      $scope.$watchCollection('parents[' + index + ']', function(newVal) {
          if (newVal) {
            angular.forEach(newVal.children, function(item, index) {
              item.checked = newVal.checked;
            });
          }
      });
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="parent in parents">
    <input type="checkbox" ng-model="parent.checked" /> {{parent.name}}
    <ul>
      <li ng-repeat="child in parent.children">
         <input type="checkbox" ng-model="child.checked" /> {{child.name}}
      </li>
    </ul>
  </div>
</div>

＆＃13;

查找在嵌套的ng-repeat AngularJS中单击或选中的复选框

1 个答案: