Code for select/unselect all checkboxes in an AngularJS Table

Question

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:

<table>
<thead>
  <tr>
    <th>
      <input name="all"
      type="checkbox"
      ng-click="selectAll()" />
    </th>
    <th>ID</th>
    <th>Date</th>
  </tr>
</thead>
<tbody ng-repeat="x in cons">
  <tr>
    <td>
      <input type="checkbox" 
      name="selectedids[]"
      value="{{x.id}}"
      ng-checked="idSelection.indexOf(x.id) > -1" 
      ng-click="toggleSelection(x.id, idSelection)"> </td>
    <td>{{x.id}}</td>
    <td>{{x.title}}</td>
  </tr>
</tbody>

app.js:

  $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 {
        listSelection.push(selectionName);
    }
};


//$scope.selectAll=function(){}
//Need code for this function to work

Here is a demo: http://plnkr.co/edit/m9eQeXRMwzRdfCUi5YpX?p=preview.

Will be grateful, if anyone can guide.

FuriousD · Accepted Answer · 2016-07-11 10:47:06Z

1

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 = $scope.cons.map(function(item) {
      return item.id;
    });
  } else {
    $scope.idSelection = [];
  }
}

answered Jul 11, 2016 at 10:47

FuriousD

8545 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Deborah Over a year ago

Thanks a lot.. dats perfect!! Thanks for the explanation aswell!!

Collectives™ on Stack Overflow

Code for select/unselect all checkboxes in an AngularJS Table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related