AngularJS 过滤器是框架中一个非常实用的功能，它主要用于在模板中对数据进行格式化、筛选和转换，而无需在控制器中编写复杂的处理逻辑，过滤器通过管道符（）与表达式结合使用，语法简洁直观，能够有效提升开发效率和代码可读性。
过滤器的核心概念
过滤器本质上是一个函数,它接收输入数据，返回处理后的结果，在 AngularJS 中，过滤器可以应用于表达式、指令或模板的任何位置，其基本语法为 {{ expression | filterName : parameter1 : parameter2 ... }}，filterName 是过滤器的名称，parameter 是传递给过滤器的可选参数，AngularJS 内置了多种常用过滤器，同时也支持自定义过滤器以满足业务需求。
内置过滤器详解
AngularJS 提供了丰富的内置过滤器，覆盖了数据处理的常见场景，以下是一些核心内置过滤器的功能及示例：
-
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 的用户，按姓名排序，最后将金额格式化为美元形式。
自定义过滤器
当内置过滤器无法满足需求时,可以通过 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]。
过滤器的性能优化
虽然过滤器使用方便,但在处理大数据量时需注意性能问题，建议：
- 避免在循环中频繁调用复杂过滤器；
- 优先使用
ng-repeat的track by减少 DOM 操作； - 对于纯前端筛选,可结合
filter和orderBy过滤器减少数据量后再渲染。
AngularJS 过滤器通过声明式语法简化了数据处理流程，内置过滤器覆盖了常见场景，而自定义过滤器则提供了极大的灵活性，合理使用过滤器不仅能提升代码可维护性，还能让业务逻辑与视图层解耦，是 AngularJS 开发中不可或缺的工具。
图片来源于AI模型，如侵权请联系管理员。作者：酷小编，如若转载，请注明出处：https://www.kufanyun.com/ask/41268.html
