AngularJS: Check Uncheck All / Select Deselect All Multiple CheckBoxes using Single CheckBox
Population of multiple CheckBoxes
Inside the GenerateTable function, an array of JSON objects is created and assigned to the Customers JSON array.
The ng-repeat directive as the name suggests repeats the element based on the length of the collection, in this scenario it will repeat the TR element (HTML Table Row).
The TBODY element of the HTML Table has been assigned ng-repeat directive in order to iterate through all the items of the Customers JSON array.
For each JSON object in the Customers JSON array, a TR element (HTML Table Row) is generated and appended into the HTML Table.
Check Uncheck All functionality
There are two methods which implement the Check Uncheck All functionality.
CheckUncheckHeader – This method as the name suggests take care of making sure when the Header row CheckBox will be checked and when it will be unchecked.
This method is called when the AngularJS App is initialized and also called using the ng-change directive of the row CheckBoxes.
Inside this method, a loop is executed and if all the row CheckBoxes are checked, then the IsAllChecked Model variable (which sets the Header row CheckBox) to True and if even one row CheckBox is unchecked then the IsAllChecked Model variable is set to False.
CheckUncheckAll – This method is assigned to the ng-change directive of the Header row CheckBox. When the Header row CheckBox is checked, then it checks all the row CheckBoxes and when the Header row CheckBox is unchecked, it unchecks all the row CheckBoxes.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.Customers = [
{ CustomerId: 1, Name: "John Hammond", Country: "United States", Selected: true },
{ CustomerId: 2, Name: "Mudassar Khan", Country: "India", Selected: true },
{ CustomerId: 3, Name: "Suzanne Mathews", Country: "France", Selected: true },
{ CustomerId: 4, Name: "Robert Schidner", Country: "Russia", Selected: true }
];
$scope.CheckUncheckHeader = function () {
$scope.IsAllChecked = true;
for (var i = 0; i < $scope.Customers.length; i++) {
if (!$scope.Customers[i].Selected) {
$scope.IsAllChecked = false;
break;
}
};
};
$scope.CheckUncheckHeader();
$scope.CheckUncheckAll = function () {
for (var i = 0; i < $scope.Customers.length; i++) {
$scope.Customers[i].Selected = $scope.IsAllChecked;
}
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<table cellpadding="0" cellspacing="0">
<tr>
<th align = "left">
<label>
<input type="checkbox" ng-model="IsAllChecked" ng-change="CheckUncheckAll()" />
CustomerId</label>
</th>
<th>
Name
</th>
<th>
Country
</th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td>
<label for="chkCustomer_{{m.CustomerId}}">
<input id="chkCustomer_{{m.CustomerId}}" type="checkbox" ng-model="m.Selected" ng-change="CheckUncheckHeader()" />
{{m.CustomerId}}
</label>
</td>
<td>
{{m.Name}}
</td>
<td>
{{m.Country}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Comments
Post a Comment