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