NgTable with checkboxes does not select all checkboxes in the grid

Question

How can I select all the checkboxes in the grid when I click on the top checkbox. At this point, he only clicks the checkboxes of the current page. If you can imitate your decision on Plunk, he really appreciates. Thanks in advance.

Here is the link: Table with checkboxes

$scope.checkboxes = { 'checked': false, items: {} }; // watch for check all checkbox $scope.$watch('checkboxes.checked', function(value) { angular.forEach($scope.users, function(item) { if (angular.isDefined(item.id)) { $scope.checkboxes.items[item.id] = value; } }); }); 

Answer 1

I am sure that you already understood this, but since the question remained unanswered, and I was looking for a way to do this, I updated your plunker for future reference if someone stumbles on this issue.

http://plnkr.co/edit/PjTlyX?p=preview

There are two things to consider if you want to check all the checkboxes regardless of filtering, or whether the check should be central.

Set the $ scope variable to the unfiltered list if you want to ignore filtering in the data source

 var data = [{id: 1, name: "Moroni", age: 50, money: -10}, {id: 2, name: "Tiancum", age: 43,money: 120}] $scope.data = data; 

or if you prefer to only select the checkboxes that were filtered out, set the orderedData to another $ scope variable in the $ scope.tableParams method

 var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data; orderedData = params.filter() ? $filter('filter')(orderedData, params.filter()) : orderedData; $scope.orderedData = orderedData; 

Then you can freely select the checkboxes you ever prefer by simply changing $ scope.users to your preferred $ scope variable below

 // watch for check all checkbox $scope.$watch('checkboxes.checked', function(value) { angular.forEach($scope.users, function(item) { if (angular.isDefined(item.id)) { $scope.checkboxes.items[item.id] = value; } }); }); 

Answer 2

This is another way to do this from official documentation.

See the Codepen Demo here

Explaination

You can create your own header template, for example

 <script type="text/ng-template" id="headerCheckbox.html"> <input type="checkbox" ng-model="demo.checkboxes.checked" class="select-all" value="" /> </script> 

and add a column to the table e.g.

 <td header="'headerCheckbox.html'"><input type="checkbox" ng-model="demo.checkboxes.items[row.id]" /></td> 

and see the demo.checkbox.checked model for changes

 $scope.$watch(function() { return self.checkboxes.checked; }, function(value) { angular.forEach(simpleList, function(item) { self.checkboxes.items[item.id] = value; }); });