Tharindu Senanayake Tharindu Senanayake - 3 months ago 23
Javascript Question

How to select all the check boxes in nested ng-repeat

I'm trying to create a list where there are multiple select all buttons to for ng-repeat check boxes.
HTML code

<div class="col-xs-12"ng-repeat="items in testArray">
<div class="col-xs-6">
{{items.brand}}
</div>
<div class="col-xs-6 col-sm-offset-6">
<button ng-click="selectAll()">select All</button>
<div ng-repeat="i in items.form">
<input type="checkbox"/>{{i.formName}}
</div>
</div>
</div>

Answer

look at code snippet given below , this will give you idea.

var app = angular.module("myApp",[]);

app.controller('demoCtrl',function($scope){

   $scope.itemsArray = [{name:"Test 1",forms:[{formName:"xyz 1 "},{formName:"xyz 1 "}]},{name:"Test 2",forms:[{formName:"xyz 2 "},{formName:"xyz 1 "}]},{name:"Test 3 ",forms:[{formName:"xyz 3"},{formName:"xyz 1 "}]}];
  
  
  
  $scope.selectAll = function(item){
  
    for(var i =0;i < item.forms.length;i++)
      {
        
        item.forms[i].isChecked = true;
      }
  
  }
  
  $scope.removeAll = function(item) {
  
    
    for(var i =0;i < item.forms.length;i++)
      {
       
        item.forms[i].isChecked = false;
      }
  }
  
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <div ng-app="myApp">
    
    <div ng-controller="demoCtrl">
      
          <div ng-repeat="item in itemsArray">
      
            <span>{{item.name}}</span>
            
            <button ng-click="selectAll(item)"> select All </button> 
            
            <button ng-click="removeAll(item)"> Deselect All </button>  
            
              <div ng-repeat="i in item.forms">
              
                <input type="checkbox"   ng-model="i.isChecked"/>
                
              </div>  
            
            </div>
   </div>
    </div>