Angular check all and uncheck all checkbox
Today, We want to share with you Angular check all and uncheck all checkbox.
In this post we will show you check all and uncheck all checkbox in AngularJs, hear for Check All , UnCheck All – AngularJs we will give you demo and example for implement.
In this post, we will learn about Check uncheck all Multiple Checkboxes with AngularJS with an example.
Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.check all and uncheck all checkbox in AngularJs
The checking the master checkbox (select/deselect)should check all click the other child checkboxes or unchecking deselect the master checkbox should uncheck all deselect the other child checkboxes.
So, in this IMP. post we are going to View how used to we can do this using AngularJs.
Example 1 : Select all deselect all angular Source code
<h1>Simple check all checkboxes Example using a checkbox in angularjs</h1>
<div>
<ul ng-controller="sallcheckboxlistCtrl">
<li>Please Select all - Check All
<input type="checkbox" ng-model="LanguageselectedAlllist" ng-click="checkAll()" />
</li>
<li ng-repeat="item_name in LanguagesList">
<label>{{item_name.Name}}
<input type="checkbox" ng-model="item_name.Selected" />
</label>
</li>
</ul>
</div>
FileName : app.js
angular.module("CheckAlllistModule", [])
.controller("sallcheckboxlistCtrl", function sallcheckboxlistCtrl($scope) {
$scope.LanguagesList = [{
Name: "Step by step Learn Laravel"}, {Name: "Example of Angularjs"}, {Name: "Simple MeanJs"}, {Name: "demo of PHP"}, {Name: "download Vuejs"}, {Name: "ecommerce site Magento"}, {Name: "test demo in Asp.net"}, {Name: "basic HTML syntax"}, {Name: "Ionic steps"}, {Name: "Stack Overflow points"
}];
$scope.checkAll = function () {
if ($scope.LanguageselectedAlllist) {
$scope.LanguageselectedAlllist = true;
} else {
$scope.LanguageselectedAlllist = false;
}
angular.forEach($scope.LanguagesList, function (name_item) {
name_item.Selected = $scope.LanguageselectedAlllist;
});
};
});
Example 2 : check all checkboxes using a checkbox in angularjs code
<h1>Simple check all checkboxes Example using a checkbox in angularjs</h1>
<div>
<ul ng-controller="sallcheckboxlistCtrl">
<li>Check All
<input type="checkbox" ng-model="LanguageselectedAlllist" ng-click="getcheckboxAll()" />
</li>
<li ng-repeat="item_name in Items">
<label>{{item_name.Name}}
<input type="checkbox" ng-model="item_name.Selected" ng-change="tottalgetcheckallStatus();" />
</label>
</li>
</ul>
</div>
File : javascript
angular.module("CheckAlllistModule", [])
.controller("sallcheckboxlistCtrl", function sallcheckboxlistCtrl($scope) {
$scope.LanguagesList = [{
Name: "Laravel with angular"}, {Name: "asp.net with Angularjs"}, {Name: "tutorial of MeanJs"}, {Name: "dynemic example of PHP"}, {Name: "step by step Vuejs"}, {Name: "Magento with angularjs"}, {Name: "simple example of Asp.net"}, {Name: "test HTML demo"}, {Name: "new learn languages Ionic"}, {Name: "demo of Stack Overflow"
}];
$scope.getcheckboxAll = function () {
if ($scope.LanguageselectedAlllist) {
$scope.LanguageselectedAlllist = true;
} else {
$scope.LanguageselectedAlllist = false;
}
angular.forEach($scope.LanguagesList, function (name_languahes) {
name_languahes.Selected = $scope.LanguageselectedAlllist;
});
};
$scope.tottalgetcheckallStatus= function() {
var totalcheckCountsum = 0;
angular.forEach($scope.LanguagesList, function(LanguagesList) {
if(LanguagesList.Selected) totalcheckCountsum++;
});
$scope.LanguageselectedAlllist = ( totalcheckCountsum === $scope.LanguagesList.length);
};
});
Demo