Javascript 如何使用Angular.js按数值对表格进行排序？

我需要使用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>   

---

我需要按照

total

列值排序，这意味着它应该按降序排列（

9,6,5,4,3

）。

按

orderBy

筛选：

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

这是一个现场的

:

通过表达式谓词对指定数组进行排序。字符串按字母顺序排列，数字按数字顺序排列。注意：如果您注意到数字没有按预期排序，请确保它们实际上被保存为数字而不是字符串。还支持类似数组的值（例如节点列表、jQuery对象、TypeDarray、字符串等）

---

按

orderBy

筛选：

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

这是一个现场的

:

通过表达式谓词对指定数组进行排序。字符串按字母顺序排列，数字按数字顺序排列。注意：如果您注意到数字没有按预期排序，请确保它们实际上被保存为数字而不是字符串。还支持类似数组的值（例如节点列表、jQuery对象、TypeDarray、字符串等）

---

可以使用

|

字符使用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>  

{{$index+1}}
{{c.rest_name}
{{c.page_hit}
{{c.map_hit}
{{c.gallery_hit}
{{c.web_hit}
{{c.total}

如果要对多个项目进行排序，可以使用数组，例如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>  

{{$index+1}}
{{c.rest_name}
{{c.page_hit}
{{c.map_hit}
{{c.gallery_hit}
{{c.web_hit}
{{c.total}

您可以使用

|

字符使用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>  

{{$index+1}}
{{c.rest_name}
{{c.page_hit}
{{c.map_hit}
{{c.gallery_hit}
{{c.web_hit}
{{c.total}

如果要对多个项目进行排序，可以使用数组，例如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>  

{{$index+1}}
{{c.rest_name}
{{c.page_hit}
{{c.map_hit}
{{c.gallery_hit}
{{c.web_hit}
{{c.total}

Ok，正常工作。但是假设一个

total

值多次出现，比如说

9

我们可以按照名称字母顺序再次排序吗？请在clickSummary | orderBy:['-total'，'+name'中尝试

c

its

rest\u name

而不是

name

。请更正。现在是完美的。让我接受这个答案。再次感谢。在html中使用

orderBy

会导致在每个摘要周期重新调用数组，这可能会影响具有长列表或多种用法的视图的性能。如果排序后数组是静态的，最好在加载数组时在控制器中使用

orderBy

。由于这个原因，Angular2没有

orderBy

功能。好的，它可以工作。但是假设一个

total

值多次出现，比如说

9

我们可以再次按照名称的字母顺序对其排序吗？请在clickSummary中尝试

c，orderBy:['-total'，'+name']

its

rest\u name

而不是

name

。请更正。现在是完美的。让我接受这个答案。再次感谢。在html中使用

orderBy

会导致在每个摘要周期重新调用数组，这可能会影响具有长列表或多种用法的视图的性能。如果排序后数组是静态的，最好在加载数组时在控制器中使用

orderBy

。由于这个原因，Angular2没有订购方功能。