在 Angular 应用程序中,ng-repeat 是一个常用的指令,用于在 HTML 模板中循环渲染数组数据。有时候,我们需要按照数组项的特定属性值进行排序,这就需要使用 orderBy 过滤器。
orderBy 过滤器
orderBy 过滤器是 Angular 内置的过滤器之一,可以对数组或对象的属性进行排序。它接受一个可选的参数,表示要排序的属性名或函数,如果没有传递该参数,则默认按照数组项本身进行排序。
<!-- 按 person.name 进行排序 --> <div ng-repeat="person in people | orderBy:'name'"> {{ person.name }} </div>
<!-- 按复杂表达式进行排序 --> <div ng-repeat="person in people | orderBy:'age*2+height/100':true"> {{ person.name }} ({{ person.age }}) </div>
上面的例子中,第二个参数是一个 JavaScript 表达式,它将 age 乘以 2 并加上 height/100,然后把结果作为排序依据。第三个参数是一个布尔值,表示是否按照降序排列,默认为升序。
在 ng-repeat 中使用 orderBy
在 ng-repeat 中使用 orderBy 过滤器非常简单,只需要在 ng-repeat 后添加管道符和 orderBy 过滤器即可。
<div ng-repeat="person in people | orderBy:'age'"> {{ person.name }} ({{ person.age }}) </div>
上面的代码将根据每个 person 的 age 属性进行升序排列。
按多个属性排序
有时候,我们需要按照多个属性进行排序。例如,先按照年龄从小到大排序,然后在同龄人中按照身高从高到低排序。这可以通过连续使用 orderBy 过滤器来实现。
<div ng-repeat="person in people | orderBy:['age', '-height']"> {{ person.name }} ({{ person.age }}, {{ person.height }}) </div>
上面的代码将首先按照 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