ngTable with Checkboxes not select all the check boxes on the grid

Question

How can I select all check boxes on the grid when I click the top check box.At this moment it clicks only the current page check boxes.If you can simulate your solution on Plunk,it's highly appreciate.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;
        }
    });
});

Jimmie

Answer 1

I'm sure by now you have figured this out but since the question has been left unanswered and I was looking for a way to do just this I have updated your plunker for future reference if anyone stumbles across this question.

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

There are 2 things to consider, do you wish to check all checkboxes regardless of filtering or does the checking need to be filter centric.

Set a $scope variable to the unfiltered list if you wish to ignore filtering on 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 would prefer to only select checkboxes that have been filtered set the orderedData to another $scope variable within 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 are free to select the checkboxes which ever way you prefer by simply changing $scope.users to the prefer $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;
        }
    });
});

Barehanded

Wow..Its really nice.Thanks a lot :).Actually I didn't have any solution for this until now.Thanks again :) – Jimmie

Great! Exactly what I need. Thank you. I updated it for AngularJS 1.6.4 and ngTable 1.0.0: plnkr.co/edit/km1Sjv?p=preview – Wheelwork

Answer 2

This is another way to do it from the official documentation.

See the Codepen Demo here

Explaination

You can create your header template like

<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 in your table like

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

and watch the model demo.checkbox.checked for changes

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

Batts