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

How to remove duplicate value while sorting in angularjs?

本文关键字：排序 删除 angularjs      更新时间：2023-09-26

我已经使用angularjs在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>
脚本

和

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

让我给你看看我的活塞:https://plnkr.co/edit/pHPxJBD92utJxpFv4GhB?p=preview

请帮我解决这个问题。

如果我得到正确下面的代码可能为您工作。您可以尝试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>

你可以使用AngularUI中的唯一过滤器，并直接在ng-repeat中使用它。(这是方法之一)

AngularUI唯一过滤器:- https://github.com/angular-ui/angular-uiOLDREPO/blob/master/modules/filters/unique/unique.js

usage: collection | uniq: 'property'您可以通过嵌套属性筛选:collection | uniq: 'property.nested_property'

使用

: - 

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:我们按客户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
相关文章：