triggering all the checkbox event while selecting checkall in angularjs

Question

<table class="table">
<thead>
            <th> <input type='checkbox' name='selectall' ng-model="value1" ng-click="selectAll()"></th>
            <th>  Name </th>
        </thead>
        <tr ng-repeat="x in items">
            <td><input type='checkbox' ng-model="value2" ng-true-value="YES" ng-false-value="NO" ng-click="select($event,x.id)"
                            /></td>
            <td>{{x.name}}</td>
            </tr>
        </tr>
    </table>

How to I get all the item.id when I click "selectall()" checkbox ?

Also, Can you suggest me appropriate ng-model syntax for ng-repeat checkbox ?

Thanks, Raja K

Vanojx1 · Accepted Answer · 2016-03-10 11:11:07Z

Take a look at this example, you can see how the checkbox values change,

while using checkbox use ng-change instead of ng-click

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

// add a controller
myApp.controller("myCtrl", function($scope) {
  
  $scope.value1 = "NO";
  $scope.items = [{
    id: 1,
    check: "NO",
    name: "A"
  }, {
    id: 2,
    check: "NO",
    name: "B"
  }, {
    id: 3,
    check: "NO",
    name: "C"
  }, {
    id: 4,
    check: "NO",
    name: "D"
  }, {
    id: 5,
    check: "NO",
    name: "E"
  }, {
    id: 6,
    check: "NO",
    name: "F"
  }, {
    id: 7,
    check: "NO",
    name: "G"
  }, {
    id: 8,
    check: "NO",
    name: "H"
  }];
  $scope.selectAll = function() {
    angular.forEach($scope.items, function(elem) {
      elem.check = $scope.value1;
    })
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <table class="table">
    <thead>
      <th>
        <input type='checkbox' name='selectall' ng-true-value="YES" ng-false-value="NO" ng-model="value1" ng-change="selectAll()">{{value1}}
      </th>
      <th>Name</th>
    </thead>
    <tbody>
      <tr ng-repeat="x in items">
        <td>
          <input type='checkbox' ng-model="x.check" ng-true-value="YES" ng-false-value="NO" ng-change="select($event,x.id)" /> {{x.check}}
        </td>
        <td>{{x.name}}</td>
      </tr>
    </tbody>
  </table>
</body>

Hadi · Accepted Answer · 2016-03-10 15:37:26Z

var myapp = angular.module('app', []);
myapp.controller('Ctrl', function ($scope) {
  var vm = this;
    vm.data = {
      items: [
         {id:1,name:"ali",selected: "NO"},
         {id:2,name:"reza",selected: "NO"},
         {id:3,name:"amir",selected: "NO"}
      ]
     };
  
  vm.value1 = false;
  
  vm.selectAll = function($event){
     var checkbox = $event.target;
     var selected = "NO";
         if(checkbox.checked)
           {
           selected = "YES";
           }
    else {
      selected = "NO";
      }
    angular.forEach(vm.data.items, function(item) {
             item.selected = selected;
             });
    
         
         
   
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl as vm">
<table class="table">
<thead>
            <th> <input type='checkbox' name='selectall' ng-model="value1" ng-click="vm.selectAll($event)"></th>
            <th>  All </th>
        </thead>
        <tr ng-repeat="x in vm.data.items">
            <td><input type='checkbox' ng-model="vm.data.items[$index].selected" ng-true-value="YES" ng-false-value="NO" ng-click="vm.select($event,x.id)"
                            /></td>
            <td>{{x.name}}</td>
            
        </tr>
    </table>

</div>

halfer · Accepted Answer · 2024-09-29 19:40:13Z

0

Here I've given a scenario for selecting all records. Modify it according to your need.

<button ng-click="selectAll()">select all</button>
<div ng-repeat="item in items">
  <label>
    {{item.n}}:
    <input type="checkbox" ng-model="selected[item.id]">
  </label>
</div>

And in the controller, simply set all the items to be true in selected:

$scope.selected = {};
$scope.selectAll = function(){
  for (var i = 0; i < $scope.items.length; i++) {
    var item = $scope.items[i];

    $scope.selected[item.id] = true;
  }
};

edited Sep 29, 2024 at 19:40

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Mar 10, 2016 at 11:08

Amulya Kashyap

2,3731 gold badge20 silver badges26 bronze badges

Collectives™ on Stack Overflow

triggering all the checkbox event while selecting checkall in angularjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related