Demonstration of Row Span in AngularJS

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

In this article we will look into Row Spanning / Merging in AngularJS


 Download source code for Demonstration of Row Span in AngularJS

Introduction

Suppose we have the below

We need to merge the rows of the "Name" column for the similar one's such that the output should look like

In this article we will look into Row Spanning / Merging in AngularJS

Using the code

Let us first create the personController.js

//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. 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">Person's Mobile Information</font></u></b></div>
		<div ng-controller="personCtrl" align="center">  
			<table border="1">
				<tr>
					  <th>Name</th>	
					  <th>Mobile Number</th>				 
					  <th>Price</th>					  
				</tr>
				<tr ng-repeat="p in persons">
					
					<td><span>{{p.personName}}</span></td>
					<td><span>{{p.mobileNumber}}</span></td>					
					<td><span>{{p.price}}</span></td>
				</tr>				
			</table>
		</div>		
	</body>
</html>

At this stage, the output will be

At first we are loading the AngularJS and the personController.js files. Then we are defining the Application Module(personApp) inside the body by using the ng-app.

ng-app is an AngularJS directive which indicates the start of the AngularJS application.Then by using the ng-controller, we have attached the controller (personCtrl) to the view (html).Now since we have multiple records to loop through, we need to use the ng-repeat directive which is basically a kind of loop in AngularJS parlance.

Once we loop through the student records, then by using expression, we have bind the properties from controller to the view.

For Row Spanning of the "Name" column, we will compare the current personName value with the previous one and if they are the same then we will hide it.

<span ng-hide="persons[$index-1].personName == p.personName">{{p.personName}}</span>

Let us analyze the above statement properly by executing the below code.

<table border="1">
	<tr>
		<th>Index #</th>
		<th>Previous Name</th>
		<th>Current Name</th>		  
	</tr>
	<tr ng-repeat="p in persons">
		 <td>{{ $index-1}}</td> 
		 <td>{{persons[$index-1].personName}}</td> 
		 <td>{{p.personName}}</td> 
	</tr>				
</table>

The output will be

As per our logic, if Previous Name is equal to Current Name, we are not displaying the personName record. So for the Index # : -1 , Previous Name is not equal to Current Name and henceforth, the personName will be displayed. But for Index # : 0 to Index # : 2, it is same and so the personName will not be displayed. again for the Index # : 3 , Previous Name is not equal to Current Name and henceforth, the personName will be displayed. This process continues.

The last bit of work is to display the Price column records in Indian Currency Format. Now, AngularJS already has Currency Filter which formats a number to a currency format. So if we do

{{p.price | currency:"& #8377;"}}

we will get the Indian Currency since & #8377; is the character code of "?".

The complete View code(index.html) is as under

<!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">Person's Mobile Information</font></u></b></div>
		<div ng-controller="personCtrl" align="center">  
			<table border="1">
				<tr>
					  <th>Name</th>	
					  <th>Mobile Number</th>				 
					  <th>Price</th>					  
				</tr>
				<tr ng-repeat="p in persons">

					<td><span ng-hide="persons[$index-1].personName == p.personName">{{p.personName}}</span></td>
					<td><span>{{p.mobileNumber}}</span></td>
					<td><span>{{p.price | currency:"& #8377;"}}</span></td>
										
				</tr>				
			</table>

		</div>		
	</body>
</html>

That yields the result

Conclusion

This article taught us how to perform Row Span/Merging is AngularJS. Hope this will be helpful. Thanks for reading.Zipped file is attached herewith.

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)