Wie doppelte Wert beim Sortieren in angularjs entfernen?

Ich habe eine Tabelle von Datensätzen in HTML mit angularjs erstellt. Das Problem, dem ich gegenüberstehe, ist, den doppelten Wert beim Sortieren wegzunehmen. Ab sofort habe ich die doppelten Datensätze beim Laden der Seite genommen. Aber wenn ich versuche, die Datensätze in absteigender Reihenfolge zu sortieren, kann ich die doppelten Datensätze wieder sehen.Wie doppelte Wert beim Sortieren in angularjs entfernen?

Hier ist mein 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>

Und Skript

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

Und lassen Sie mich Ihnen meine Plunker zeigen: https://plnkr.co/edit/pHPxJBD92utJxpFv4GhB?p=preview

Bitte helfen Sie mir dies aus.

Quelle

2016-11-10 anil chean

Also ... welche sind die duplizierten Werte? –

Bucket Werte sind Duplikate @ Jim Mischel –

@ Jim Mischel Ich habe den doppelten Wert für Bucket ausblenden, aber beim Sortieren nach der Reihenfolge kann ich die doppelten Werte sehen. –

Wenn ich richtig komme unten Code könnte für Sie arbeiten. Sie können versuchen ng-if-Bedingung und es wird basierend auf umgekehrten Wert angezeigt

<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>

Quelle

2016-11-10 05:50:02 Irfan

@ irfan es funktioniert gut. –

@ irfan danke –

@anilchean: Gut zu wissen :) – Irfan

Sie können die einzigartigen Filter aus AngularUI verwenden und direkt im ng-Repeat verwenden (dies ist eine des Ansatzes)

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

Nutzung:. Colection | uniq: 'property' Sie können nach geschachtelten Eigenschaften filtern nach: colection | uniq: 'property.nested_property'

Verbrauch: -

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: Wir Filter von Kunden-ID, also entfernen Sie doppelte Kunden

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

Ergebnis: Alle Kundenliste:

foo 10 
bar 20 
baz 30

Quelle

2016-11-10 05:32:20

@ Sarun UK nur als Referenz habe ich Ihnen die JSON-Daten gegeben. aber ich verwende die API, um die Datensätze abzurufen. –

Wie doppelte Wert beim Sortieren in angularjs entfernen?

Antwort

Verwandte Themen