AngularJS is an open source, MV* Javascript framework developed by Google. It is widely use across the industry to build web applications.In this article, we will demonstrate the use of Check Box functionality in AngularJS.
Introduction
AngularJS is an open source, MV* Javascript framework developed by Google. It is widely use across the industry to build web applications.In this article, we will demonstrate the use of Check Box functionality in AngularJS.
Using the code
Let us first present the json data. Let's first create the personController.js controller and add the below code
//creating an application module
var personAppModule = angular.module("personApp", []);
//The below code will read the data from personDataSource and will pass to the $scope.persons variable
personAppModule.controller("personCtrl", function($scope){
var personDataSource =
[
{
"personName": "Niladri",
"mobileNumber": "1111111111",
"price": 3600
},
{
"personName": "Niladri",
"mobileNumber": "2222222222",
"price": 10987
},
{
"personName": "Niladri",
"mobileNumber": "3333333333",
"price": 15224
},
{
"personName": "Niladri",
"mobileNumber": "4444444444",
"price": 9899
},
{
"personName": "Babai",
"mobileNumber": "5555555555",
"price": 12000
},
{
"personName": "Babai",
"mobileNumber": "6666666666",
"price": 17000
},
{
"personName": "Arina",
"mobileNumber": "7777777777",
"price": 8000
},
{
"personName": "Arina",
"mobileNumber": "8888888888",
"price": 9999
},
{
"personName": "Arina",
"mobileNumber": "9999999999",
"price": 45000
},
{
"personName": "RNA Team",
"mobileNumber": "1234567890",
"price": 80009
}];
$scope.persons = personDataSource;
});//end controller
At first we are creating the personDataSource and then assigning it to $scope.persons.
The $scope.persons variable acts as a glue for carrying the data from the controller to the view (i.e. index.html part).
Now once the controller is ready, it's time to bind the data to the view. So let's create the below html
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js">
</script>
<script src="personController.js"></script>
</head>
<body ng-app="personApp">
<div align="center"><b><u><font size="8px">Demonstration of Check Box functionality in AngularJS</font></u></b>
</div>
<div ng-controller="personCtrl">
<table width="400" border="1">
<tr>
<th>Select</th>
<th>Name</th>
<th>Mobile Number</th>
<th>Price</th>
</tr>
<tr ng-repeat="person in persons">
<td><input type="checkbox" /> </td>
<td>{{ person.personName }}</td>
<td>{{ person.mobileNumber }}</td>
<td>{{ person.price }}</td>
</tr>
</table>
</div>
</body>
</html>
The resultant output is
The above code reflects the rudimentary record being passed from the controller and presented.
We would like to enhance the UI as under
Once the user clicks on the Select All checkbox, then All the records should be selected and should appear under the Selected Records grid.
for this to happen, let us add the below code in the index.html
<div ng-controller="personCtrl">
<label>
<input type="checkbox"
ng-model="allChecked"
ng-click="checkAll()" /> Select All
</label>
<table width="400" border="1">
<tr>
<th>Select</th>
<th>Name</th>
<th>Mobile Number</th>
<th>Price</th>
</tr>
<tr ng-repeat="person in persons">
<td><input type="checkbox" ng-model="person.check"/> </td>
<td>{{ person.personName }}</td>
<td>{{ person.mobileNumber }}</td>
<td>{{ person.price }}</td>
</tr>
</table>
<br/><br/>
<div>
<span>Selected Records</span>
<table width="400" border="1">
<tr>
<th>Name</th>
<th>Mobile Number</th>
<th>Price</th>
</tr>
<tr ng-repeat="person in persons | filter: {check:true}">
<td>{{ person.personName }}</td>
<td>{{ person.mobileNumber }}</td>
<td>{{ person.price }}</td>
</tr>
</table>
</div>
And the corresponding personController.js controller code should be enhanced to
$scope.showSelectedRecords =false;
$scope.checkAll = function() {
for(var i=0; i < $scope.persons.length; i++) {
$scope.persons[i].check = $scope.allChecked;
}
$scope.showSelectedRecords =true;
};
$scope.allChecked = true;
The code is looping through the person collection and setting the model person.check to true for each person record.
To check the concept, let us put an alert function inside the checkAll function as under and test the application.
$scope.showSelectedRecords =false;
$scope.checkAll = function() {
for(var i=0; i < $scope.persons.length; i++) {
alert($scope.allChecked);
$scope.persons[i].check = $scope.allChecked;
}
$scope.showSelectedRecords =true;
};
$scope.allChecked = true;
The resultant output is
Kindly note that, the
$scope.allChecked = true;
is placed at the down. This ensures that, the initial value of $scope.allChecked will always be false.
So, when we unselect the Select All checkbox, the value comes as
Now we need to have the same functionality for the individual row's. For this let us modify the below code in the index.html
<tr ng-repeat="person in persons">
<td><input type="checkbox" ng-model="person.check" ng-click="checkSelected()" /> </td>
<td>{{ person.personName }}</td>
<td>{{ person.mobileNumber }}</td>
<td>{{ person.price }}</td>
</tr>
We can figure out that on click event we are invoking a function checkSelected which is defined in the controller as
$scope.checkSelected = function() {
for(var i = 0; i < $scope.persons.length; i++) {
if (!$scope.persons[i].check) {
$scope.allChecked = false;
$scope.showSelectedRecords =false;
return false;
}
}
The resultant output is as under
If we unselect, then the result will be
Conclusion
Hope this will be helpful.Thanks for reading. Zipped file attached.