如何使用Angular.js根据数字值对表格进行排序？

Question

I need to sort the table row value as per one column which contains some number type value using Angular.js. I am providing my code below.

<tr ng-repeat="c in clickSummary">
   <td>{{$index+1}}</td>
   <td>{{c.rest_name}}</td>
   <td>{{c.page_hit}}</td>
   <td>{{c.map_hit}}</td>
   <td>{{c.gallery_hit}}</td>
   <td>{{c.web_hit}}</td>
   <td>{{c.total}}</td>
</tr>   

Here clickSummary obejct is containing some array of data.This above table output is displaying like below.

sl no    name    page hit   map hit     gallery hit    web hit    total

1        aaa       1             1         0             1          3

2        bbb       2             2         1              0          5

3        ccc       1             2         3              0           6

4        ddd       1             3         0              0            4

5       eee        2             4         1              2            9

I need to sort as per total column value means it should come in descending order( 9,6,5,4,3 ).

Answer 1

By orderBy filter:

<tr ng-repeat="c in clickSummary | orderBy:['-total','+rest_name'] ">

Here is a live demo

Angular orderBy Docs :

Orders a specified array by the expression predicate. It is ordered alphabetically for strings and numerically for numbers. Note: if you notice numbers are not being sorted as expected, make sure they are actually being saved as numbers and not strings. Array-like values (eg NodeLists, jQuery objects, TypedArrays, Strings, etc) are also supported.

Answer 2

you can use angularJS default filters using | character

<tr ng-repeat="c in clickSummary | orderBy:'-total'">
   <td>{{$index+1}}</td>
   <td>{{c.rest_name}}</td>
   <td>{{c.page_hit}}</td>
   <td>{{c.map_hit}}</td>
   <td>{{c.gallery_hit}}</td>
   <td>{{c.web_hit}}</td>
   <td>{{c.total}}</td>
</tr>  

if you want to sort for multiple items you can creare an array, for example total and name:

<tr ng-repeat="c in clickSummary | orderBy:['-total','name']">
   <td>{{$index+1}}</td>
   <td>{{c.rest_name}}</td>
   <td>{{c.page_hit}}</td>
   <td>{{c.map_hit}}</td>
   <td>{{c.gallery_hit}}</td>
   <td>{{c.web_hit}}</td>
   <td>{{c.total}}</td>
</tr>