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

Question

我有一个父复选框列表以及每个父复选框内的子复选框列表。

父复选框附加 data-info="category" 属性，子复选框附加 data-info="name" 属性。

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

我想要的是，当我取消选中父复选框时，所有 subchkbx 也应该取消选中。仅未选中未选中的场景。

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

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

Answer 1

您可以将复选框绑定到父项目上的检查属性，然后设置 @987654321 @：当检查属性更改时，更新孩子的检查属性。

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;
            });
          }
      });
    });
});

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