anil chean anil chean - 11 months ago 45
AngularJS Question

How to display alphabet as the first record in the table using orderBy in Angularjs?

Hi everyone i'm working on angularjs to display list of records in table . The difficulty i'm facing is to display the table in ascending order, i have used the alphabet record (X) which i need to display has the first record in the table.

Let me give you the html page.

<table class="table table-bordered">
<thead>
<tr>
<th ng-click="sort('bucket')" th-sort by="order">Bucket<span class="sortorder descending" ng-hide="(sortKey=='bucket' && reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='bucket' && reverse==false)"></span>
</th>
<th ng-click="sort('productCode')" th-sort by="order">Product Code<span class="sortorder descending" ng-hide="(sortKey=='productCode' && reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='productCode' && reverse==false)"></span>
</th>
<th ng-click="sort('countOfAllocatedAccount')" th-sort by="order">Allocated
<span class="sortorder descending" ng-hide="(sortKey=='countOfAllocatedAccount' && reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='countOfAllocatedAccount' && reverse==false)"></span>
</th>
<th ng-click="sort('countOfCollectedAccount')" th-sort by="order">Collected
<span class="sortorder descending" ng-hide="(sortKey=='countOfCollectedAccount' && reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='countOfCollectedAccount' && reverse==false)"></span></th>
<th ng-click="sort('sumOfArrearsOfAllocatedAmount')" th-sort by="order">Total Allocated Amount
<span class="sortorder descending" ng-hide="(sortKey=='sumOfArrearsOfAllocatedAmount' && reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='sumOfArrearsOfAllocatedAmount' && reverse==false)"></span>
</th>
<th ng-click="sort('sumOfCollectedAmount')" th-sort by="order">Total Collected Amount
<span class="sortorder descending" ng-hide="(sortKey=='sumOfCollectedAmount' && reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='sumOfCollectedAmount' && reverse==false)"></span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in view_data">
<td><span ng-hide="view_data[$index-1].bucket == item.bucket">{{item.bucket}}</span></td>
<td>{{item.productCode}}</td>
<td>{{item.countOfAllocatedAccount}}</td>
<td>{{item.countOfCollectedAccount}}</td>
<td><span>{{item.sumOfArrearsOfAllocatedAmount | currency:"&#8377;"}}</span></td>
<td>{{item.sumOfCollectedAmount | currency:"&#8377;"}}</td>
</tr>
</tbody>
</table>


And let me show you the output :

enter image description here

And here is my jsfiddle : http://jsfiddle.net/CvKNc/152/

As shown in the image the bucket value X is in the last value in the table. But, i need display it in the first row of the table and rest numbers should be set in the ascending order. I'm stuck here, Please anyone help me with this.

Answer Source

//creating an application module
var myAppModule = angular.module("myApp", []);
myAppModule.controller("MyCtrl", function($scope, $http,$filter){   

    var jsonData = [
                      {
                        "bucket": ">120",
                        "productCode": "SBML",
                        "countOfAllocatedAccount": 640                      
                      },
                      {
                        "bucket": ">120",
                        "productCode": "SBHL",
                        "countOfAllocatedAccount": 1391
                      },
                      {
                        "bucket": "1-30",
                        "productCode": "SBHL",
                        "countOfAllocatedAccount": 1081
                      },
                      {
                        "bucket": "1-30",
                        "productCode": "SBML",
                        "countOfAllocatedAccount": 408
                      },
                      {
                        "bucket": "1-30",
                        "productCode": "SBML",
                        "countOfAllocatedAccount": 998
                      },                      

                      {
                        "bucket": "X",
                        "productCode": "SBML+",
                        "countOfAllocatedAccount": 93
                      }
                    ];
         
   $scope.products =  $filter('orderByValue')(jsonData);
  
    });//end controller



myAppModule.filter('orderByValue', function() {

  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;
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
<body ng-app="myApp">       
        <div ng-controller="MyCtrl">
    <table border="1">
                <tr>

                      <th>Bucket</th>   
                      <th>PRODUCT_CODE</th>              
                      <th>Allocated #</th>                   
                </tr>
                <tr ng-repeat="p in products  ">

                      <td ><span ng-show="products[$index-1].bucket != p.bucket">{{p.bucket}}</span></td>                                     
                      <td><span>{{p.productCode}}</span></td>
                      <td><span>{{p.countOfAllocatedAccount}}</span></td>                     
                </tr>               
            </table>
</div>
  
    </body>
</html>