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;
}
});
});
This is another way to do it from the official documentation.
See the Codepen Demo here
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;
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With