In this article we will look into Row Spanning / Merging 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.