AngularJS 的orderBy很好很强大
发布在前端填坑实录2017年3月31日view:2221前端开发IgoriAssowMVVM前端工程师
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

记录一下AngularJS 1.x.x 中orderBy的使用


写在前面的话

Angular的filter是用来格式化数据的,Angular内置了很多的filter,比如dateFilter(date),lowercaseFilter(lowercase)/uppercaseFilter(uppercase),numberFilter(number),currencyFilter(currency),orderByFilter(orderBy)等等,假如这些都还不能满足你,你还可以自定义Filter。在我项目过程中使用最多的也就是dateFilter(date)时间格式化、currencyFilter(currency)货币格式化以及orderByFilter(orderBy)数据排序,今天来讲讲数据排序。

首先看看官方API

Usage

In HTML Template Binding

{{ orderBy_expression | orderBy : expression : reverse}}

In JavaScript

$filter('orderBy')(array, expression, reverse)

Arguments

Param Type Details
array Array The array to sort.
expression function()string
Array.<(function(
) or string)>
A predicate to be used by the comparator to determine the order of elements.
Can be one of:
* function: Getter function. The result of this function will be sorted using the <, =, > operator.
* string: An Angular expression which evaluates to an object to order by, such as ‘name’ to sort by a property called ‘name’. Optionally prefixed with + or - to control ascending or descending sort order (for example, +name or -name).
* Array: An array of function or string predicates. The first predicate in the array is used for sorting, but when two items are equivalent, the next predicate is used.
reverse (optional) boolean Reverse the order of the array.

实际应用中注意的点

ng-repeat="childPage in childPageList track by $index | orderBy: 'activeState'"

orderBy 后面跟的字段名称必须用引号包起来,直接写 activeState 是没有效果的,也不需要把对象前缀加上childPage.activeState 这样也是没有效果的。然而注意了这些,上一段代码任然没有效果。因为orderBy和track by 连用的时候,track by 必须要在orderBy的后面。 原来在angular1.2以后,加入了一个新的属性,track by。当没有这个属性的时候

ng-repeat="childPage in childPageList"

ng-repeat默认的为每一个循环的对象添加一个$$hashkey, 这个属性是自增的,有点类似于数据库中的id自增,不过是个字符串类型。 当我们的数据发生变化时(没有track by的情况下),ng-repeat会重新的刷新我们的Dom树,这里的刷新是指的删除掉所有已有的元素,然后重新生成Dom节点,并编号。这会导致我们的页面可能会有频繁的刷新,可能会造成卡顿或者性能降低。 当我们加入track by这个属性的时候

ng-repeat="childPage in childPageList track by $index"

这个时候,ng-repeat会按照我们指定的编码去标示一个对象,并在数据发生变化时,去更新这个Dom,而不是重新生成,这里也要求我们指定的对象是唯一的。

如果我们再引入orderBy就看到orderBy和track by同时出现的时候,orderBy失效了。其实,是我们写的语法不正确。

正确的语法是这样的:

 ng-repeat="childPage in childPageList | orderBy: 'activeState' track by $index"

然后再扩展一下,多字段组合排序

ng-repeat="childPage in childPageList | orderBy: ['activeState', 'diffTime'] track by $index"

再来降序(升序加’ + ’,降序加 ’ - ’)

 ng-repeat="childPage in childPageList | orderBy: ['-activeState', '-diffTime'] track by $index"

再看看reverse参数表示什么

reverse参数是boolean值,可选的,看解释Reverse the order of the array. 翻转整个排序后的数组,意思就是排序后,还可以把整个排序结果倒置。看效果。

ng-repeat="childPage in childPageList | orderBy: ['-activeState', '-diffTime'] track by $index"

结果展示enter image description here

加上翻转参数

ng-repeat="childPage in childPageList | orderBy: ['activeState', 'diffTime'] : true track by $index"

结果展示enter image description here

看结果是不是和上面的刚好相反。 AngularJS取代了后端的逻辑,把逻辑层放到了前端,而后端就只专注于提供数据,所以在数据的处理方面Angular的表现还是非常不错的。

评论
发表评论
3年前

dsfdf

WRITTEN BY
mailylqj
世界是那么寂静,我只能听到自己的心跳,当我思念的时候,你刚好也在想我吗?
TA的新浪微博
PUBLISHED IN
前端填坑实录

整理平时项目中遇到的问题,以及解决办法。

我的收藏