In this Article, I Would Like To Know You About Binding Of List To
A Table Using ng-repeat. And Showing The Data In A Table And Showing The Column
Data Conditionally Which Is Having Same Category. For This I Had Used $index To
Identify The Same Column Data in HTML Page Like By Comparing The Current Row
Column Data With Previous Row Column Data, I Am Hiding The Column Data, If The
Data Is Same As Previous Row Data Like Using
ng-if="ItemDetails[$index - 1].CategoryCode!=item.CategoryCode"
Actually Conditionally Displaying By Comparing With Previous Row Is Not Good For Huge Data, Please See The Nested ng-repeat In Nested Tables
Actually Conditionally Displaying By Comparing With Previous Row Is Not Good For Huge Data, Please See The Nested ng-repeat In Nested Tables
We Can See The Code As Below :
index.html
<!DOCTYPE html>
<html ng-app="groupbymultipleelementsfunctionality">
<head>
<meta charset="utf-8" />
<title>AngularJS
- ng-repeat Functionality</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="index.js"></script>
</head>
<body ng-controller="GroupByMultipleElementsController">
<div class="form-group container">
<div class="row">
<h3>AngularJS
- Display Column Data Comparing With Previous Row In ng-repeat</h3>
</div>
<div class="row">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Item Category Code</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>
<tr ng-show="ItemDetails.length!=0" ng-repeat="item in ItemDetails">
<td ng-if="ItemDetails[$index - 1].CategoryCode!=item.CategoryCode">{{item.CategoryCode}}</td>
<td ng-if="ItemDetails[$index - 1].CategoryCode==item.CategoryCode"></td>
<td ng-if="ItemDetails[$index - 1].CategoryCode!=item.CategoryCode">{{item.ItemCategory}}</td>
<td ng-if="ItemDetails[$index - 1].CategoryCode==item.CategoryCode"></td>
<td>{{ item.ItemName}}</td>
<td>{{ item.ItemCode}}</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>
</div>
</div>
</div>
</body>
</html>
index.js
var app = angular.module('groupbymultipleelementsfunctionality', []);
app.controller('GroupByMultipleElementsController', function ($scope, $window) {
$scope.ItemDetails = [
{
ItemId: 1,
CategoryCode: "TX001",
ItemCategory: "Computer",
ItemCode: "KB384",
ItemName: "KeyBoard",
ItemOldPrice: "600",
ItemNewPrice: "500"
},
{
ItemId: 2,
CategoryCode: "TX001",
ItemCategory: "Computer",
ItemCode: "MU932",
ItemName: "Mouse",
ItemOldPrice: "500",
ItemNewPrice: "400"
},
{
ItemId: 3,
CategoryCode: "TX001",
ItemCategory: "Computer",
ItemCode: "PD843",
ItemName: "Pendrive",
ItemOldPrice: "600",
ItemNewPrice: "400"
},
{
ItemId: 4,
CategoryCode: "TX001",
ItemCategory: "Computer",
ItemCode: "DV0495",
ItemName: "DVD Drive",
ItemOldPrice: "2000",
ItemNewPrice: "1500"
},
{
ItemId: 5,
CategoryCode: "TX002",
ItemCategory: "Electricity",
ItemCode: "KB384",
ItemName: "KeyBoard",
ItemOldPrice: "500",
ItemNewPrice: "300"
},
{
ItemId: 6,
CategoryCode: "TX002",
ItemCategory: "Electricity",
ItemCode: "MU932",
ItemName: "Mouse",
ItemOldPrice: "400",
ItemNewPrice: "300"
},
{
ItemId: 7,
CategoryCode: "TX002",
ItemCategory: "Electricity",
ItemCode: "PD843",
ItemName: "Pendrive",
ItemOldPrice: "800",
ItemNewPrice: "700"
},
{
ItemId: 8,
CategoryCode: "TX002",
ItemCategory: "Electricity",
ItemCode: "DV0495",
ItemName: "DVD Drive",
ItemOldPrice: "1000",
ItemNewPrice: "800"
}
]; //To Declare
List
});
Output:-
Note:- If The Data Is Huge Then Using This Comparison Method Is Bad Practice
Download Code From GitHub
Download Code From GitHub
No comments:
Post a Comment
Note: only a member of this blog may post a comment.