如何在angularjs中排序時刪除重複值？

我使用angularjs在html中創建了一個記錄表。我面臨的問題是在排序時帶走重複值。截至目前，我已經採取重複記錄，而頁面加載。但是，當我嘗試按降序對記錄進行排序時，我能夠再次看到重複的記錄。如何在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:"&#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":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

請大家幫我出這一點。

來源

2016-11-10 anil chean

那麼......哪些是重複值？ –

存儲桶值是重複的@ Jim Mischel –

@ Jim Mischel我已經隱藏了存儲桶的重複值，但在排序到取消訂購順序時，我能夠看到重複的值。 –

如果我正確得到下面的代碼可能適合你。你可以嘗試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>

來源

2016-11-10 05:50:02 Irfan

@ irfan它工作正常。 –

@ irfan謝謝 –

@anilchean：很高興知道:) – Irfan

你可以從AngularUI使用獨特的過濾網，並直接在NG-重複使用（這是方法之一）

AngularUI獨特的過濾網： - https://github.com/angular-ui/angular-uiOLDREPO/blob/master/modules/filters/unique/unique.js

用法：保藏中心| uniq：'property' 你可以通過嵌套屬性進行過濾：colection | 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>

結果：所有的客戶名單：

foo 10 
bar 20 
baz 30

來源

2016-11-10 05:32:20

@Sarun英國僅供參考我給你的JSON數據。但是，我正在使用API來獲取記錄。 –

如何在angularjs中排序時刪除重複值？

回答

相關問題