0
Я создал таблицу записей в html с помощью angularjs. Проблема, с которой я сталкиваюсь, заключается в том, чтобы убрать дублирующее значение при сортировке. На данный момент я взял дубликаты записей во время загрузки страницы. Но когда я пытаюсь сортировать записи в порядке убывания, я снова вижу дубликаты записей.Как удалить повторяющееся значение при сортировке в angularjs?
Вот мой HTML:
<!doctype html>
<html ng-app='myApp'>
<head>
<title>ng-include directives in AngularJS</title>
<link href="style.css" rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" type='text/javascript'></script>
<script src='script.js' type='text/javascript'></script>
<link rel="stylesheet" href="style1.css" />
</head>
<body ng-controller="MyCtrl">
<table border='1'>
<tr >
<th ng-click='sortColumn("bucket")' ng-class='sortClass("bucket")'>buckets</th>
<th ng-click='sortColumn("productCode")' ng-class='sortClass("productCode")'>productCode</th>
<th ng-click='sortColumn("countOfAllocatedAccount")' ng-class='sortClass("countOfAllocatedAccount")'>countOfAllocatedAccount</th>
<th ng-click='sortColumn("countOfCollectedAccount")' ng-class='sortClass("countOfCollectedAccount")'>countOfCollectedAccount</th>
<th ng-click='sortColumn("sumOfArrearsOfAllocatedAmount")' ng-class='sortClass("sumOfArrearsOfAllocatedAmount")'>sumOfArrearsOfAllocatedAmount</th>
<th ng-click='sortColumn("sumOfCollectedAmount")' ng-class='sortClass("sumOfCollectedAmount")'>sumOfCollectedAmount</th>
</tr>
<tr ng-repeat='p in products | orderBy:column:reverse'>
<td><span ng-show="products[$index-1].bucket != p.bucket" ng-model="sorting">{{p.bucket}}</span></td>
<td><span>{{p.productCode}}</span></td>
<td><span>{{p.countOfAllocatedAccount}}</span></td>
<td><span>{{p.countOfCollectedAccount}}</span></td>
<td>{{p.sumOfArrearsOfAllocatedAmount | currency:"₹"}}</td>
<td><span>{{p.sumOfCollectedAmount | currency:"₹"}}</span></td>
</tr>
</table>
</body>
</html>
И сценарий
var myAppModule = angular.module("myApp", []);
myAppModule.controller("MyCtrl", function($scope,$filter){
var jsonData = [
{
"bucket": ">120",
"productCode": "SBML",
"countOfAllocatedAccount": 640,
"countOfCollectedAccount": 0,
"sumOfArrearsOfAllocatedAmount": 98413381,
"sumOfCollectedAmount": 0
},
{
"bucket": ">120",
"productCode": "SBHL",
"countOfAllocatedAccount": 1391,
"countOfCollectedAccount": 0,
"sumOfArrearsOfAllocatedAmount":3597,
"sumOfCollectedAmount": 0
},
{
"bucket": "1-30",
"productCode": "SBHL",
"countOfAllocatedAccount": 1081,
"countOfCollectedAccount": 0,
"sumOfArrearsOfAllocatedAmount": 3207770,
"sumOfCollectedAmount": 0
},
{
"bucket": "1-30",
"productCode": "SBML",
"countOfAllocatedAccount": 408,
"countOfCollectedAccount": 0,
"sumOfArrearsOfAllocatedAmount": 6811438,
"sumOfCollectedAmount": 0
},
{
"bucket": "31-60",
"productCode": "SBHL",
"countOfAllocatedAccount": 539,
"countOfCollectedAccount": 0,
"sumOfArrearsOfAllocatedAmount": 3153475,
"sumOfCollectedAmount": 0
},
{
"bucket": "31-60",
"productCode": "SBML",
"countOfAllocatedAccount": 214,
"countOfCollectedAccount": 0,
"sumOfArrearsOfAllocatedAmount": 5573527,
"sumOfCollectedAmount": 0
},
{
"bucket": "61-90",
"productCode": "SBHL",
"countOfAllocatedAccount": 321,
"countOfCollectedAccount": 0,
"sumOfArrearsOfAllocatedAmount": 2788035,
"sumOfCollectedAmount": 0
},
{
"bucket": "61-90",
"productCode": "SBML",
"countOfAllocatedAccount": 203,
"countOfCollectedAccount": 0,
"sumOfArrearsOfAllocatedAmount": 8079320,
"sumOfCollectedAmount": 0
},
{
"bucket": "91-120",
"productCode": "SBHL",
"countOfAllocatedAccount": 272,
"countOfCollectedAccount": 0,
"sumOfArrearsOfAllocatedAmount": 3028477,
"sumOfCollectedAmount": 0
},
{
"bucket": "91-120",
"productCode": "SBML",
"countOfAllocatedAccount": 93,
"countOfCollectedAccount": 0,
"sumOfArrearsOfAllocatedAmount": 4913095,
"sumOfCollectedAmount": 0
},
{
"bucket": "X",
"productCode": "SBHL",
"countOfAllocatedAccount": 272,
"countOfCollectedAccount": 0,
"sumOfArrearsOfAllocatedAmount": 3028477,
"sumOfCollectedAmount": 0
},
{
"bucket": "X",
"productCode": "SBML",
"countOfAllocatedAccount": 93,
"countOfCollectedAccount": 0,
"sumOfArrearsOfAllocatedAmount": 4913095,
"sumOfCollectedAmount": 0
}
];
$scope.products = $filter('orderByValue')(jsonData);
console.log("hi");
$scope.column = 'orderByValue';
$scope.column = $scope.products;
// sort ordering (Ascending or Descending). Set true for desending
$scope.reverse = false;
// called on header click
$scope.sortColumn = function(col){
//$scope.products = col;
$scope.column = col;
$scope.column = $scope.products;
if($scope.reverse){
$scope.products = $filter('orderByValue')(jsonData);
$scope.reverse = false;
$scope.reverseclass = 'arrow-up';
}else{
$scope.reverse = true;
$scope.reverseclass = 'arrow-down';
$scope.reverseSort=true;
console.log("hmmm");
}
};
// remove and change class
$scope.sortClass = function(col){
if($scope.column == col){
if($scope.reverse){
//$scope.products = $filter('orderByValue')(jsonData);
return 'arrow-down';
//console.log("I call")
}else{
return 'arrow-up';
//$scope.products = false;
}
}else{
return '';
}
}
});
myAppModule.filter('orderByValue', function() {
//$scope.reverse = true;
return function(items, field) {
var filtered = [],filteredX = [];
angular.forEach(items, function(item) {
if(item.bucket=="X")
{
filteredX.splice(0, 0, item);
}else if(item.bucket.indexOf(">") !== -1) {
filtered.push(item);
}else
{
filteredX.push(item);
}
});
angular.forEach(filtered, function(item) {
filteredX.push(item);
});
return filteredX;
//console.log("hi");
};
});
И позвольте мне показать вам мой plunker: https://plnkr.co/edit/pHPxJBD92utJxpFv4GhB?p=preview
Пожалуйста, помогите мне в этом.
Итак ..., которые являются дублируемыми значениями? –
значения ковша повторяются @ Jim Mischel –
@ Jim Mischel У меня есть дублирующее значение для bucket, но при сортировке по желаемому заказу я могу видеть повторяющиеся значения. –