In This Article, I Would Like
To Know You About The Key, Value Pair Of ng-repeat Using GroupBy Filter With
Multiple Elements.
Another Example Is Shown In
The DisplayingList Using Nested ng-repeat In Nested Tables Using GroupBy Filter
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="groupbymultipleelementsfunctionality">
<head>
<meta charset="utf-8" />
<title>AngularJS
- Key, Value Pair Of ng-repeat Using GroupBy Filter With Multiple Elements</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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<script src="index.js"></script>
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body ng-controller="GroupByMultipleElementsController">
<div class="form-group container">
<div class="row">
<h3>AngularJS - Key, Value Pair Of ng-repeat Using GroupBy Filter With
Multiple Elements</h3>
</div>
<div class="row">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Transaction Id</th>
<th>Item Category</th>
<th>Item Code</th>
<th>Item Name</th>
<th>Item Old Price</th>
<th>Item New Price</th>
</tr>
</thead>
<tbody ng-show="filteredItems.length!=0" ng-repeat="(key,value) in filteredItems | groupBy: '[TransactionId, ItemCategory]'">
<tr ng-show="filteredItems.length!=0" ng-repeat="item in value">
<!-- <td>{{$index}}</td>-->
<td ng-if="$index==0">{{key.split(',')[0]}}</td>
<td ng-if="$index>0" style="border:0px solid black"></td>
<td ng-if="$index==0">{{key.split(',')[1]}}</td>
<td ng-if="$index>0" style="border:0px solid black"></td>
<td ng-if="item.ShowMore">{{ item.ItemCode}}</td>
<td ng-if="item.ShowMore"><input type="checkbox" ng-click="CheckedItem(item)" />{{ item.ItemName}}</td>
<td ng-if="item.ShowMore">{{ item.ItemOldPrice}}</td>
<td ng-if="item.ShowMore">{{ item.ItemNewPrice}}</td>
<td ng-if="$index==0"><a href="" ng-click="ExpandMore(value)">{{(!this.ShowMore) ? value.length-1 : 0}} More</a></td>
<td ng-if="$index==0"><button type="button" data-toggle="modal" data-target="#selectedgroup" ng-click="DisplaySelectedTransaction(value)">Display</button></td>
</tr>
<tr ng-show="filteredItems.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" ng-if="item.checked">
<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-if="!SelectedTransactions.length" style="text-align:center;color:lightgrey;font:bold 200% arial, verdana;">
<td>
No Record
Is Checked
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
index.js
======
var app = angular.module('groupbymultipleelementsfunctionality', ['angular.filter']);
app.controller('GroupByMultipleElementsController', 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
},
{
ItemId: 9,
TransactionId: "TX002",
ItemCategory: "Electricity",
ItemCode: "HD074",
ItemName: "Hard Drive",
ItemOldPrice: "900",
ItemNewPrice: "700",
ShowMore: false
}
]; //To Declare
List
$scope.filteredItems = $scope.ItemDetails;
$scope.ClearTextBoxes = function () {
$window.location.reload();
//$scope.searchItemCode
= '';
//$scope.searchItemName
= '';
//$scope.searchItemPrice
= '';
}
$scope.ExpandMore = function (value) {
this.ShowMore ? this.ShowMore
= false : this.ShowMore = true;
// this.ShowMore = !this.ShowMore;
if (this.ShowMore)
{
//
this.ShowMore = true;
for (var i = 0; i
< value.length; i++) {
value[i].ShowMore = true;
}
}
else {
// this.ShowMore = false;
for (var i = 0; i
< value.length; i++) {
if (i != 0)
value[i].ShowMore = false;
}
}
}
$scope.CheckedItem = function (item) {
item.checked ? item.checked = false : item.checked = true;
$scope.SelectedTransactions = [];
if (item.checked)
$scope.SelectedTransactions.push(item);
}
$scope.DisplaySelectedTransaction = function (item) {
$scope.selectedGroupItems = item;
}
Output:-
======
After Running The Application, It Displays As Below :
After Click On More Link, It Display More Existing Data As Below:
Here Selection Of Item Names As Below:
Download Code From GitHub
No comments:
Post a Comment
Note: only a member of this blog may post a comment.