嵌套的“全部检查”和“取消选中所有”模型应使用 angularjs 反映在 JSON 中

Nested Check all and UnCheck all models should be reflected in JSON using angularjs

本文关键字：angularjs JSON 模型 全部检查 检查 取消 嵌套 全部      更新时间：2023-09-26

我必须使用 angular Js 在我的 Web 应用程序中实现嵌套的"全部检查"和"取消选中全部"。我正在努力实现这些东西，它的模型（检查所有，取消检查所有，子检查）应该在json中更新。如何实现它。提前谢谢。

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

请注意：

  1. toggleAll()现在在ngChange上调用。
  2. 电流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>

附加了工作链接。
代码在这里

$scope.toggleAll = function(index, torf){
    $scope.options[index].subList.forEach(function(val){
      val.subSelect = torf;
    });
  };
  $scope.optionToggled = function(id){
    $scope.options.forEach(function(val) {
      if(val.id == id){var isTrue = true;
      var isFalse = false;
        val.subList.forEach(function(val1) {
      if(!val1.subSelect||!isTrue)
        isTrue = false;
        if(val1.subSelect||isFalse)
      isFalse = true;
    });
    if(isTrue){
      val.selected = true;
    }else{
      val.selected = false;
    }
      }
    });
  };

试试这个： 

 <div class="pull-left">
        <a  ng-click='checkAll()'>All</a>  &nbsp;|&nbsp;
        <a  ng-click='uncheckAll()'>None</a> &nbsp; &nbsp; 
 </div>
 <input  type="checkbox" ng-model="data.selectedRecord" />
  $scope.checkAll = function () {
        $scope.checkList = [];
        angular.forEach($scope.checkList, function (data){
            data.selectedRecord = true;
            $scope.checkList.push(data.id);
        });
    }
    $scope.uncheckAll = function () {
        angular.forEach($scope.checkList, function (data) {
            $scope.checkList = [];
            data.selectedRecord = false;
        });
    }

我也在使用这个。它正在为我工作。

相关文章：