javascript - 嵌套的Check all和UnCheck所有模型应使用angularjs反射(reflect)在JSON中

我必须使用角度Js在我的Web应用程序中实现嵌套的Check all和Uncheck all。我正在努力实现这些东西，并且应该在json中更新其模型（checkall，unCheckall，sub Checks）。如何实现。提前致谢。

angular.module("app", []).controller("ctrl", function($scope) {

  $scope.options = [{
    value: 'Check All 1',
    selected: false,
    subList: [{
      subSelect: false,
      id: 1,
      value: "check_1"
    }, {
      subSelect: false,
      id: 2,
      value: "check_2"
    }]
  }, {
    value: 'Check All 2',
    selected: false,
    subList: [{
      subSelect: false,
      id: 3,
      value: "check_1"
    }, {
      subSelect: false,
      id: 4,
      value: "check_2"
    }]
  }];

});

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body>
  <div ng-app="app" ng-controller="ctrl">
    <form id="selectionForm">
      <div ng-repeat="option in options" ng-model="options">
        <input type="checkbox" ng-click="toggleAll()" ng-model="option.selected">Check all
        <br>
        <div ng-repeat="sub in option.subList" ng-model="option.subList" style="margin:0px 15px">
          <input type="checkbox" ng-model="sub.subSelect" ng-change="optionToggled()">{{sub.value}}
        <div>
      </div>
    </form>

  </div>
 {{options}}
</body>

</html>

最佳答案

实现toggleAll()这样的东西：

$scope.toggleAll = function(option) {
    angular.forEach(option.subList, function(value, key) {
        value.subSelect = option.selected;
    });
};

并像这样实现optionToggled()：

$scope.optionToggled = function(option) {
    var flag = true;
    angular.forEach(option.subList, function(value, key) {
      flag = flag && value.subSelect;
    });
    option.selected = flag;
};

并注意：

现在在ngChange上调用toggleAll()。
当前的option作为输入参数传递给toggleAll()和optionToggled()。

angular.module("app", []).controller("ctrl", function($scope) {

  $scope.options = [{
    value: 'Check All 1',
    selected: false,
    subList: [{
      subSelect: false,
      id: 1,
      value: "check_1"
    }, {
      subSelect: false,
      id: 2,
      value: "check_2"
    }]
  }, {
    value: 'Check All 2',
    selected: false,
    subList: [{
      subSelect: false,
      id: 3,
      value: "check_1"
    }, {
      subSelect: false,
      id: 4,
      value: "check_2"
    }]
  }];

  $scope.toggleAll = function(option) {
    angular.forEach(option.subList, function(value, key) {
      value.subSelect = option.selected;
    });
  };

  $scope.optionToggled = function(option) {
    var flag = true;
    angular.forEach(option.subList, function(value, key) {
      flag = flag && value.subSelect;
    });
    option.selected = flag;
  };
});

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<body>
  <div ng-app="app" ng-controller="ctrl">
    <form id="selectionForm">
      <div ng-repeat="option in options"
           ng-model="options">
        <input type="checkbox"
               ng-change="toggleAll(option)"
               ng-model="option.selected">Check all
        <br>
        <div ng-repeat="sub in option.subList"
             ng-model="option.subList"
             style="margin:0px 15px">
          <input type="checkbox"
                 ng-model="sub.subSelect"
                 ng-change="optionToggled(option)">{{sub.value}}
        </div>
      </div>
    </form>
    {{options}}
  </div>
</body>
</html>