Angular ng-repeat 中按数组项值 orderBy

阅读时长 4 分钟读完

在 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

纠错
反馈