如何使用Angular.js按照数值对表进行排序?

时间:2016-05-27 13:09:43

标签: javascript angularjs

我需要使用Angular.js按照包含某个数字类型值的列对表行值进行排序。我在下面提供我的代码。

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

此处clickSummary obejct包含一些数据数组。上面的表输出显示如下。

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

我需要按total列值进行排序,这意味着它应按降序排列(9,6,5,4,3)。

2 个答案:

答案 0 :(得分:3)

orderBy过滤器:

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

这是一个实时 demo

Angular orderBy Docs

  

通过表达式谓词对指定的数组进行排序。它按字母顺序排列为字符串,数字排序为数字。注意:如果您发现数字未按预期排序,请确保它们实际上是保存为数字而不是字符串。还支持类似数组的值(例如NodeLists,jQuery对象,TypedArrays,字符串等)。

答案 1 :(得分:0)

您可以使用|字符

来使用angularJS默认过滤器
<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>  

如果要对多个项目进行排序,可以创建一个数组,例如total和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>