Sunday 25 October 2015

Angular select all/de select all checkbox

Let us check how we can make select/deselect check box using angular js. I have explained the same using Angular 2 and Jquery as well. If you want to compare the implementation please check below post as well.

1. Select all/ deselect all checkbox - Angular 2
2. Select all/ deselect all check box using Jquery

HTML



<input type="checkbox" ng-model="master" ng-change="isSelectAll()">
<label>Countries</label>

<span ng-repeat="label in labelList">
 <input type="checkbox" ng-model="label.selected" ng-change="isLabelChecked()">
 <label>{{ label.name }}</label>
</span>
 

JSON


 $scope.labelList = [
 {name:'India'},
 {name:'USA'},
 {name:'Russia'},
 {name:'China'},
 {name:'Australia'},
 {name:'Japan'}
 ]

Select all deselect all angular code



$scope.model = {
   selectedLabelList : []
}
$scope.isSelectAll = function(){
 
  $scope.model.selectedLabelList = [];
  
  if($scope.master){
    $scope.master = true;
    for(var i=0;i<$scope.labelList.length;i++){
     $scope.model.selectedLabelList.push($scope.labelList[i].name);  
    }
  }
  else{
   $scope.master = false;
  }
  
  angular.forEach($scope.labelList, function (item) {
    item.selected = $scope.master;
  });
}


Now you can see that select all/de select all feature is working fine .But if we unselect one of the checkbox then the master check box also need to uncheck and also if we select all check box master should also checked .For making this possible add below code as well.



$scope.isLabelChecked = function()
{
  var _name = this.label.name;
  if(this.label.selected){
   $scope.model.selectedLabelList.push(_name);
   if($scope.model.selectedLabelList.length == $scope.labelList.length )
    {
     $scope.master = true;
    }
  }else{
   $scope.master = false;
   var index = $scope.model.selectedLabelList.indexOf(_name);
   $scope.model.selectedLabelList.splice(index, 1);
 }
}
  

Another Approach

Comparatively better approach suggested by TIM in the comment section.

HTML


<div>
  <ul ng-controller="checkboxController">
    <li>
      <label>Countries
        <input type="checkbox" ng-model="selectedAll" ng-click="selectAll()" />
      </label>
    </li>
    <li ng-repeat="item in Items">
      <label>
        <input type="checkbox" ng-model="item.Selected" ng-click="checkIfAllSelected()" /> 
  {{item.name}}
      </label>
    </li>
  </ul>
</div>


JS



  $scope.Items = [{
      name: 'India'
    }, {
      name: 'USA'
    }, {
      name: 'Russia'
    }, {
      name: 'China'
    }, {
      name: 'Australia'
    }, {
      name: 'Japan'
    }];

    $scope.selectAll = function() {
      angular.forEach($scope.Items, function(item) {
        item.Selected = $scope.selectedAll;
      });
    };

    $scope.checkIfAllSelected = function() {
      $scope.selectedAll = $scope.Items.every(function(item) {
        return item.Selected == true
      })
    };


Related Posts

1. Angular js client side pagination like google.

2. Angular Loader using font awesome icons

3. Angular js add class to active element


11 comments :

  1. Bit long-winded.. here's a more elegant version: http://jsfiddle.net/deeptechtons/TKVH6/

    ReplyDelete
    Replies
    1. Thanks ...
      But in your solution if we unselect any check box still master check box is checked and also if we select all child then master is not updating ..For this reason I made like above

      Delete
    2. Ahh, good point!
      I made some improvements: https://jsfiddle.net/timosolo/61nvg2tg/
      I think thats a bit simpler :)

      Delete
    3. This is awesome :) ,I will update the post with your changes .
      Many thanks

      Delete
  2. How to make it so that when you click the label it shows more options. Like when you click on USA it show all states of America and they all have their own checkboxes and when clicking on China it shows their states.

    I am capable of doing this separately from this code but when trying to add expand(show more / show less) feature on labels, I get lost.

    Your help is much appreciated.

    ReplyDelete
    Replies
    1. If you could share some piece of code or a fiddle I can help you .Any way I am planning to write about nested checkbox selection

      Delete
    2. Here is some code that I tried to make, but didn't get it to working at all. It's just a big mess for me but I really want to make this right. Hope you understand what I mean and can help me out! http://jsfiddle.net/Cp73s/4627/

      Delete
  3. Would be even better to see it as an isolated component (a container directive talking to its child option directives)

    ReplyDelete