anil chean anil chean - 24 days ago 11
AngularJS Question

How to remove duplicate value while sorting in 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.

Here is my 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

Please help me out of this .

Answer

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

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