当前位置：首页 > 主机动态 > 正文

AngularJS过滤器怎么用？详解及示例代码带你快速掌握。

admin
主机动态
2025-10-30
2158

AngularJS 过滤器是框架中一个非常实用的功能，它主要用于在模板中对数据进行格式化、筛选和转换，而无需在控制器中编写复杂的处理逻辑，过滤器通过管道符（）与表达式结合使用，语法简洁直观，能够有效提升开发效率和代码可读性。

过滤器的核心概念

过滤器本质上是一个函数,它接收输入数据，返回处理后的结果，在 AngularJS 中，过滤器可以应用于表达式、指令或模板的任何位置，其基本语法为 {{ expression | filterName : parameter1 : parameter2 ... }}，filterName 是过滤器的名称，parameter 是传递给过滤器的可选参数，AngularJS 内置了多种常用过滤器，同时也支持自定义过滤器以满足业务需求。

内置过滤器详解

AngularJS 提供了丰富的内置过滤器，覆盖了数据处理的常见场景，以下是一些核心内置过滤器的功能及示例：

AngularJS过滤器怎么用？详解及示例代码带你快速掌握。第1张

currency（货币过滤器）
用于将数字格式化为货币形式，支持指定货币符号和小数位数。
示例：{{ 1234.56 | currency : "¥" : 0 }}
输出结果：¥1,235（四舍五入并添加千分位分隔符）。
date（日期过滤器）
将日期对象或时间戳格式化为指定字符串，支持多种内置格式（如 yyyy-MM-dd、shortDate 等）。
示例：{{ 1633027200000 | date : "yyyy年MM月dd日 HH:mm" }}
输出结果：2021年09月30日 16:00。
filter（筛选过滤器）
根据条件对数组对象进行筛选，支持字符串匹配、对象属性筛选等。
示例：{{ [{name: "Alice", age: 25}, {name: "Bob", age: 30}] | filter : {age: 25} }}
输出结果：[{name: "Alice", age: 25}]。
orderBy（排序过滤器）
对数组进行排序，支持按指定属性或自定义比较函数排序。
示例：{{ [3, 1, 2] | orderBy }}
输出结果：[1, 2, 3]（升序排列）。
lowercase/uppercase（大小写过滤器）
将字符串转换为全小写或全大写形式。
示例：{{ "Hello World" | lowercase }}
输出结果：hello world。

过滤器的链式使用

AngularJS 支持多个过滤器串联使用，通过管道符连接，实现复杂的数据处理逻辑，先筛选数据再格式化输出：

{{ users | filter : {age: 25} | orderBy : "name" | currency : "$" }}

该表达式会先筛选出年龄为 25 的用户，按姓名排序，最后将金额格式化为美元形式。

AngularJS过滤器怎么用？详解及示例代码带你快速掌握。第3张

自定义过滤器

当内置过滤器无法满足需求时,可以通过 module.filter() 方法自定义过滤器，自定义过滤器的本质是一个返回过滤函数的工厂函数，以下是一个自定义“去重过滤器”的示例：

angular.module("myApp", []) .filter("unique", function() { return function(input) { if (!angular.isArray(input)) return input; return Array.from(new Set(input)); }; });

在模板中使用：{{ [1, 2, 2, 3] | unique }}，输出结果为 [1, 2, 3]。