AngularJs Check All Uncheck All
AngularJs Check All Uncheck All : Sometimes we need functionality to check all and uncheck all checkboxes. Here in this tutorial we are going to explain how you can create this functionality in AnagularJs. You can also use our online editor to edit and run demo.
AngularJs Check All Uncheck All | Select All | Unselect All Example
Unlike jQuery you don’t need to put extra effort to check/uncheck all checkboxes in AngularJs, It is very easy and simple. Here is a simple example for check and uncheck all functionality. –
AngularJs Check All Uncheck All | Example:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.Items = [{
Name: "Item 1"
}, {
Name: "Item 2"
}, {
Name: "Item 3"
}, {
Name: "Item 4"
}, {
Name: "Item 5"
}, {
Name: "Item 6"
}, {
Name: "Item 7"
},{
Name: "Item 8"
}];
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<table>
<tr>
<td><input type="checkbox" ng-model="selectedAll" />Select All Items </td>
</tr>
<tr ng-repeat="item in Items">
<td>{{item.Name}}
<input type="checkbox" ng-checked="selectedAll" />
</td>
</tr>
</ul>
</div>
</div>
</body>
</html>
|
If you run the above example it will produce output something like this –
Advertisements
