如何在angularjs中排序时删除重复值？

i have created a table of records in html using angularjs. The problem i'm facing is to take away the duplicate value while sorting. As of now i have taken the duplicate records while page loading . But when i try to sort the records to descending order i'm able to see the duplicate records again.

我使用angularjs在html中创建了一个记录表。我面临的问题是在排序时带走重复值。截至目前，我已经在页面加载时采取了重复记录。但是当我尝试按降序对记录进行排序时，我能够再次看到重复的记录。

Here is my html:

这是我的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:"&#8377;"}}</td>
<td><span>{{p.sumOfCollectedAmount | currency:"&#8377;"}}</span></td>
 </tr>
 </table>

 </body>
</html>

And script

和脚本

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": 32103597,
         "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");
  };
});

And let me show you my plunker : https://plnkr.co/edit/pHPxJBD92utJxpFv4GhB?p=preview

让我告诉你我的傻瓜：https：//plnkr.co/edit/pHPxJBD92utJxpFv4GhB？p = preview

Please help me out of this .

请帮我解决这个问题。

2 个解决方案

#1

If I am getting correctly below code might work for you. You can try ng-if condition and it will display based on reverse value

如果我在下面正确获得代码可能适合你。您可以尝试ng-if条件，它将根据反向值显示

 <td>
    <span ng-if="!reverse" ng-show="products[$index-1].bucket != p.bucket" ng-model="sorting">{{p.bucket}}</span>
    <span ng-if="reverse" ng-show="products[$index].bucket != products[$index-1].bucket" ng-model="sorting">{{p.bucket}}</span>
</td>

#2

You could use the unique filter from AngularUI and use it directly in the ng-repeat.(this is one of the approach)

您可以使用AngularUI中的唯一过滤器并直接在ng-repeat中使用它（这是方法之一）

AngularUI unique filter :- https://github.com/angular-ui/angular-uiOLDREPO/blob/master/modules/filters/unique/unique.js

AngularUI独特的过滤器： - https://github.com/angular-ui/angular-uiOLDREPO/blob/master/modules/filters/unique/unique.js

usage: colection | uniq: 'property' you can filter by nested properties to : colection | uniq: 'property.nested_property'

用法：集合| uniq：'property'你可以通过嵌套属性过滤到：colection | uniq：'property.nested_property'

Usage:-

用法：-

function MainController ($scope) {
 $scope.orders = [
  { id:1, customer: { name: 'foo', id: 10 } },
  { id:2, customer: { name: 'bar', id: 20 } },
  { id:3, customer: { name: 'foo', id: 10 } },
  { id:4, customer: { name: 'bar', id: 20 } },
  { id:5, customer: { name: 'baz', id: 30 } },
 ];
}

HTML: We filters by customer id, i.e remove duplicate customers

HTML：我们按客户ID过滤，即删除重复的客户

<th>All customers list: </th>
<tr ng-repeat="order in orders | unique: 'customer.id'" >
   <td> {{ order.customer.name }} , {{ order.customer.id }} </td>
</tr>

result: All customers list:

结果：所有客户列表：

foo 10
bar 20
baz 30

#1