AngularJS | orderBy筛选

在AngularJS中，我们可以使用orderBy来对数组进行排序，它可以按照一个或多个字段进行排序，还可以指定排序的方式，比如升序或降序。本文将帮助您了解如何使用orderBy筛选数组。

使用方式

orderBy可以作用于ng-repeat指令中的数组，也可以作用于数组本身。

作用于ng-repeat指令中的数组

<ul ng-repeat="item in items | orderBy:'name'">
  <li>{{item.name}}</li>
</ul>

上面的代码会按照name字段对数组items进行排序，并且在循环中按照排序后的顺序渲染列表项。

也可以使用数组格式指定多个字段进行排序：

<ul ng-repeat="item in items | orderBy:['name', 'age']">
  <li>{{item.name}} - {{item.age}}</li>
</ul>

上面的代码会先按照name字段进行排序，如果name相同，则按照age字段进行二次排序。

还可以指定排序方式，如下：

<ul ng-repeat="item in items | orderBy:'-age'">
  <li>{{item.name}} - {{item.age}}</li>
</ul>

上面的代码会按照age字段进行降序排序。

作用于数组本身

var items = [
  {name: 'john', age: 30},
  {name: 'susan', age: 25},
  {name: 'jim', age: 35},
];

var sortedItems = $filter('orderBy')(items, 'name');

上面的代码会按照name字段对数组items进行排序，并将排序后的结果保存到sortedItems中。

还可以使用数组格式指定多个字段进行排序：

var sortedItems = $filter('orderBy')(items, ['name', 'age']);

这段代码会先按照name字段进行排序，如果name相同，则按照age字段进行二次排序。

还可以指定排序方式，如下：

var sortedItems = $filter('orderBy')(items, '-age');

这段代码会按照age字段进行降序排序。

注意事项

• 可以在controller中注入$filter服务来使用orderBy。
• 如果orderBy作用于ng-repeat指令中的数组，则每次循环都会进行一次排序，效率可能较低，建议使用$scope.$watch监听数组变化并手动调用$filter('orderBy')。
• 如果需要排序中文，建议使用中文排序插件angular-locale_zh-cn.js并按照localeCompare函数进行排序。

结语

orderBy是AngularJS中非常有用的一个指令，通过它，我们可以轻松地对数组进行排序，方便快捷。