在 Angular 应用程序中，ng-repeat 是一个常用的指令，用于在 HTML 模板中循环渲染数组数据。有时候，我们需要按照数组项的特定属性值进行排序，这就需要使用 orderBy 过滤器。
orderBy 过滤器
orderBy 过滤器是 Angular 内置的过滤器之一，可以对数组或对象的属性进行排序。它接受一个可选的参数，表示要排序的属性名或函数，如果没有传递该参数，则默认按照数组项本身进行排序。
---- - ----------- ---- --- ---- ----------------- -- ------ - ---------------- -- ----------- -- ------
---- ---------- --- ---- ----------------- -- ------ - --------------------------------- -- ----------- -- --- ---------- --- ------
上面的例子中，第二个参数是一个 JavaScript 表达式，它将 age 乘以 2 并加上 height/100，然后把结果作为排序依据。第三个参数是一个布尔值，表示是否按照降序排列，默认为升序。
在 ng-repeat 中使用 orderBy
在 ng-repeat 中使用 orderBy 过滤器非常简单，只需要在 ng-repeat 后添加管道符和 orderBy 过滤器即可。
---- ----------------- -- ------ - --------------- -- ----------- -- --- ---------- --- ------
上面的代码将根据每个 person 的 age 属性进行升序排列。
按多个属性排序
有时候，我们需要按照多个属性进行排序。例如，先按照年龄从小到大排序，然后在同龄人中按照身高从高到低排序。这可以通过连续使用 orderBy 过滤器来实现。
---- ----------------- -- ------ - --------------- ------------ -- ----------- -- --- ---------- --- -- ------------- --- ------
上面的代码将首先按照 age 属性进行升序排列，如果有相同的 age 值，则按照 height 属性进行降序排列。
在控制器中动态设置排序依据
有时候，我们希望用户能够在界面上选择排序依据，而不是硬编码在模板中。这可以通过在控制器中设置 $scope.orderBy 属性来实现。
------------------------ ---------------- -
------------- - -
- ----- ------ ---- --- ------- --- --
- ----- -------- ---- --- ------- --- --
- ----- ------ ---- --- ------- --- --
--
------------- - -------------- -
-------------- - -----
--
------- ---------- --- ------- ---------------------------------------- ------- --------------------------------------- ------- ------------------------ ------------------------------ ---- ----------- --- ---- ----------------- -- ------ - ----------------- -- ----------- -- --- ---------- --- -- ------------- --- ------
上面的代码将在控制器中定义了一个 sortBy 函数，它用于切换 $scope.orderBy 属性。在模板中，我们可以通过 ng-click 指令来调用该函数，并传递不同的参数。最后，我们使用 orderBy 过滤器并传递 $scope.orderBy 属性来实现动态排序。
总结
Angular 的 orderBy 过滤器提供了一种简单易用的方式来对数组进行排序。在 ng-repeat 中使用 orderBy 过滤器非常方便，同时也支持按多
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31202