Demonstration of Check Box functionality in AngularJS

Rajnilari2015
Posted by in AngularJS category on for Beginner level | Points: 250 | Views : 901 red flag

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.


 Download source code for Demonstration 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.

Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)