Sampath Sampath - 5 months ago 75
AngularJS Question

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

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;
}
});
});

Answer

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;
        }
    });
});