Question

我使用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

请帮我解决这个问题。

Answer 1

如果我在下面正确获取代码可能对您有用。您可以尝试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>

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

1 个答案: