CODEWITHSUNDEEP
htmlangularjsjson
anil chean
anil chean

Reputation: 473

How to custom filter to display alphabets first in the list of records 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

As shown in the image i need to set the bucket value X as first data in the record and rest in the ascending order. I'm stuck, Please anyone help me with this.

Upvotes: 1

Views: 172

Answers (1)

rrd
rrd

Reputation: 5957

Try this:

<tr ng-repeat="item in view_data | orderBy: +item.bucket">

That should sort by that first field.

Upvotes: 1

Related Questions