AngularJS Filter（过滤器）用法详解

AngularJS中的Filter，中文称为“过滤器”，主要用于处理变量的值或进行格式化输出，从而得到符合预期结果或格式的数据。

Filter简介与基本语法

Filter简介

Filter的主要功能是对数据进行格式化。

Filter的基本语法原型如下，其中“|”符号的作用类似于Linux系统中的管道模式：

{{ expression | filter }}

Filter支持链式调用，即可以连续使用多个Filter：

{{ expression | filter1 | filter2 | ... }}

此外，Filter还可以指定多个参数：

{{ expression | filter:argument1:argument2:... }}

视图模板中的Filter使用

一、在视图模板（View Template）中使用

在表达式中应用Filters（过滤器）

使用Filter需遵循以下格式：

{{ expression | filter }}，即 {{ 表达式 | 过滤器 }}

例如：{{ 12 | currency }} 的输出结果为 $12.00

在输出结果中应用Filters（过滤器）

通俗来说，这是Filter的叠加使用，前一个Filter的输出结果将作为后一个Filter的输入数据源。

其格式需遵循如下规则：

{{ expression | filter1 | filter2 | ... }}，即表达式(expression)先使用filter1过滤，再使用filter2过滤……

带参数的Filter

Filter后面可以跟随一个或多个参数，用于实现特定的需求。

格式如下：

{{ expression | filter:argument1:argument2:... }}

示例： {{ 1234 | number:2 }} 的结果为 1,234.00

AngularJS内置Filter详解

二、使用 AngluarJS 内置Filter

AngularJS提供了9个内建的过滤器。

它们分别是currency、date、filter、json、limitTo、uppercase、lowercase、number和orderBy。

具体用法可在AngularJS官方文档中查阅，此处仅介绍几个常用示例。

currency filter（货币过滤器）

currency用于将变量转换为货币表现形式。

例如：{{ amount | currency}}

uppercase/lowercase filter（字母大小写filter）

示例：

{{ "lower cap string" | uppercase }} <input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}

date filter (日期filter)

示例：

{{ 1304375948024 | date }} {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}

json filter

示例：

{{ {foo: "bar", baz: 23} | json }}

在控制器与服务中使用Filter

在controllers， services和drictives中使用filter

可以在AngularJS的controller、service或directive中使用filter，此时需将依赖的filter名称添加到controller、service或directive的依赖中。

在controller中直接使用filter，使controller能根据需求适时调用filter。

自定义Filter的编写

三、自定义filter（过滤器）

AngularJS编写自定义过滤器的形式与AngularJS的factory service非常相似，务必记得它返回一个对象或一个函数即可。编写时，只需一个带有一个以上参数的函数。

格式大致如：

app.filter('filter(过滤器)名称',function(){ 
return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){ 
//...执行业务逻辑代码 
return 处理后的对象; 
}
});