Deborah Deborah - 1 year ago 139
AngularJS Question

Code for select/unselect all checkboxes in an AngularJS Table

Iam completely confused at a point and need anyone's help here. Went through various examples but nothing could help.

I have a created dynamic table, added with checkboxes. Now whenever a row is selected its id will be bound to an array and it will be diplayed at the top of table.

What I need is:The code for functionality of select all check box. And whenever all the rows are selected by select all checkbox, its ids has to be displayed.

Below is the code for the table:

<input name="all"
ng-click="selectAll()" />
<tbody ng-repeat="x in cons">
<input type="checkbox"
ng-checked="idSelection.indexOf( > -1"
ng-click="toggleSelection(, idSelection)"> </td>


$scope.idSelection = [];
$scope.toggleSelection = function toggleSelection(selectionName, listSelection) {

var idx = listSelection.indexOf(selectionName);
// is currently selected
if (idx > -1) {
listSelection.splice(idx, 1);
// is newly selected
else {

//Need code for this function to work

Here is a

Will be grateful, if anyone can guide.

Answer Source

You need a variable to keep track of whether 'All' is currently active or not. If not, we create a new array of all item id's using the array map function, and pass this to idSelection. If allSelected is currently active, we pass an empty array to idSelection

$scope.allSelected = false;

$scope.selectAll = function() {
  $scope.allSelected = !$scope.allSelected;

  if($scope.allSelected) {
    $scope.idSelection = $ {
  } else {
    $scope.idSelection = [];
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download