In
This Article I Would Like You To Know About Displaying List In Table Using
GroupBy Filter. i.e., If A Column Is Having Data Repeating Multilple Times Then
We Can Group The Column Same Data Into One And Display The Other In Nested
Table For That Particular Row.
To
Do Grouping We Have To Include angular-filter Script
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
As
I Am Using Modal Popup, So I Am Using The Below Links Also. The Order Of The
Links Should Be As Below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
The
Below Code Show The Illustration Of Nested ng-repeat:
And
I Had Used Some Style Sheet Also Display The Modal Popup
StyleSheet.css
.modal-content { /* This Modal
Content Is Used To Display The Center Of The Screen*/
margin-top:10%; /* To Display 10% from left
margin*/
margin-left:10%; /* To Display
10% from left margin*/
margin-right:10%; /* To Display
10% from right margin*/
border-radius: 4px;
padding: 10px;
}
.modal-title::after {
border-top: 1px solid #eee;
content: "";
display: block;
height: 1px;
margin: 16px 0 -12px;
width: 100%;
}
.modal-header,
.modal-footer {
border: none;
}
.modal-backdrop {
bottom: 0;
}
.modal-body{
height: 100%;
width: 100%;
overflow-y: auto;
padding: 16px;
}
Index.html
<!DOCTYPE html>
<html ng-app="groupbynestedngrepeatfunctionality">
<head>
<meta charset="utf-8" />
<title>AngularJS
- Nested ng-repeat Functionality</title>
<!--The
Order Of The Links Should Be As Below-->
<!--The
Below 3 Links Are For Bootsrap Effects, In This Case We Are Using For Modal
Popup-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--The
Below Link Is For AngularJS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<!-- The
Below Link Is For Filters To Use-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<script src="index.js"></script>
<link href="css/StyleSheet.css" rel="stylesheet" />
</head>
<body ng-controller="GroupByNestedNgRepeatController">
<div class="form-group container">
<div class="row">
<h3>AngularJS
- Group By Multiple Elements</h3>
</div>
<div class="row">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Transaction Id</th>
<th>Item Category</th>
</tr>
</thead>
<tbody>
<tr ng-show="ItemDetails.length!=0" ng-repeat="(key,value) in ItemDetails | groupBy: '[TransactionId, ItemCategory]'">
<td>{{key.split(',')[0]}}</td>
<td>{{key.split(',')[1]}}</td>
<td>
<table class="table">
<thead>
<tr>
<th>Item Code</th>
<th>Item Name</th>
<th>Item Old
Price</th>
<th>Item New Price</th>
</tr>
</thead>
<tbody>
<tr ng-show="ItemDetails.length!=0" ng-repeat="item in value">
<td>{{ item.ItemCode}}</td>
<td>{{ item.ItemName}}</td>
<td>{{ item.ItemOldPrice}}</td>
<td>{{ item.ItemNewPrice}}</td>
</tr>
<tr ng-show="ItemDetails.length==0" style="text-align:center;font-size:xx-large;color:lightgrey;font:bold 400% arial, verdana;">
<td>
No
Records Found
</td>
</tr>
</tbody>
</table>
</td>
<td><button type="button" data-toggle="modal" data-target="#selectedgroup" ng-click="SelectedTransactionId(value)">Display</button></td>
</tr>
<tr ng-show="ItemDetails.length==0" style="text-align:center;font-size:xx-large;color:lightgrey;font:bold 400% arial, verdana;">
<td>
No Records
Found
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--
Modal Popup-->
<div class="modal fade" id="selectedgroup" tabindex="-1" role="dialog" aria-labelledby="groupModalLabel" aria-hidden="true">
<div class="modal-body">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="groupModalLabel">Selected Item Details</h4>
</div>
<div class="modal-body">
<form>
<table class="table">
<thead>
<tr>
<th>Transaction Id</th>
<th>Item Cateogry</th>
<th>Item Code</th>
<th>Item Name</th>
<th>Item Old Price</th>
<th>Item New Price</th>
</tr>
</thead>
<tbody>
<tr ng-show="selectedGroupItems.length!=0" ng-repeat="item in selectedGroupItems">
<td>{{item.TransactionId}}</td>
<td>{{item.ItemCategory}}</td>
<td>{{ item.ItemCode}}</td>
<td>{{item.ItemName}}</td>
<td>{{ item.ItemOldPrice}}</td>
<td>{{ item.ItemNewPrice}}</td>
</tr>
<tr ng-show="selectedGroupItems.length==0" style="text-align:center;font-size:xx-large;color:lightgrey;font:bold 400% arial, verdana;">
<td>
No Records Found
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Index.js
var app = angular.module('groupbynestedngrepeatfunctionality', ['angular.filter']);
app.controller('GroupByNestedNgRepeatController', function ($scope, $window) {
$scope.ShowMore = false;
$scope.ItemDetails = [
{
ItemId: 1,
TransactionId: "TX001",
ItemCategory: "Computer",
ItemCode: "KB384",
ItemName: "KeyBoard",
ItemOldPrice: "600",
ItemNewPrice: "500",
ShowMore:true
},
{
ItemId: 2,
TransactionId: "TX001",
ItemCategory: "Computer",
ItemCode: "MU932",
ItemName: "Mouse",
ItemOldPrice: "500",
ItemNewPrice: "400",
ShowMore: false
},
{
ItemId: 3,
TransactionId: "TX001",
ItemCategory: "Computer",
ItemCode: "PD843",
ItemName: "Pendrive",
ItemOldPrice: "600",
ItemNewPrice: "400",
ShowMore: false
},
{
ItemId: 4,
TransactionId: "TX001",
ItemCategory: "Computer",
ItemCode: "DV0495",
ItemName: "DVD Drive",
ItemOldPrice: "2000",
ItemNewPrice: "1500",
ShowMore: false
},
{
ItemId: 5,
TransactionId: "TX002",
ItemCategory: "Electricity",
ItemCode: "KB384",
ItemName: "KeyBoard",
ItemOldPrice: "500",
ItemNewPrice: "300",
ShowMore: true
},
{
ItemId: 6,
TransactionId: "TX002",
ItemCategory: "Electricity",
ItemCode: "MU932",
ItemName: "Mouse",
ItemOldPrice: "400",
ItemNewPrice: "300",
ShowMore: false
},
{
ItemId: 7,
TransactionId: "TX002",
ItemCategory: "Electricity",
ItemCode: "PD843",
ItemName: "Pendrive",
ItemOldPrice: "800",
ItemNewPrice: "700",
ShowMore: false
},
{
ItemId: 8,
TransactionId: "TX002",
ItemCategory: "Electricity",
ItemCode: "DV0495",
ItemName: "DVD Drive",
ItemOldPrice: "1000",
ItemNewPrice: "800",
ShowMore: false
}
];
$scope.SelectedTransactionId = function (item) {
$scope.selectedGroupItems = item;
}
});
Output:-
If We Click On Display Button, Then That Particular Clicked Button Items Will Show In The Modal Popup
No comments:
Post a Comment
Note: only a member of this blog may post a comment.