Question

我必须使用angular Js在我的Web应用程序中实现嵌套的Check all和Uncheck all。我正在努力实现这些东西，它的模型（checkall，unCheckall，sub Checks）应该在json中更新。如何实现它。在此先感谢。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

请注意：

toggleAll()现在在ngChange上调用。
当前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>

Answer 2

附加工作link 代码在这里

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

    });
  };

Answer 3

试试这个：

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

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

嵌套Check all和UnCheck所有模型都应该使用angularjs反映在JSON中

3 个答案: