WallEE WallEE - 4 months ago 32
Javascript Question

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

I have to implement nested Check all and Uncheck all in my web application using angular Js. I am struggling to implement this and the models(checkall,unCheckall,sub Checks)should be updated inside the json. How to achieve it. Thanks In advance.



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>




Answer

Implement toggleAll() something like this :

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

And implement optionToggled() like this :

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

And notice that :

  1. toggleAll() is now called on ngChange.
  2. current option is passed to toggleAll() and optionToggled() as input param.

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>