AngularJS过滤器是数据格式化和转换的重要工具,它允许开发者在视图层对数据进行实时处理，而无需修改控制器中的原始数据，过滤器通过管道符（|）应用于表达式，语法简洁且功能强大，广泛应用于日期格式化、数字处理、字符串操作等场景，本文将详细介绍AngularJS过滤器的核心概念、常见类型、自定义方法及最佳实践。
内置过滤器类型及使用场景
AngularJS提供了多种内置过滤器,满足日常开发中的大部分需求。
-
日期过滤器（date）
用于格式化日期对象，支持多种预定义格式或自定义格式。{{ birthday | date:'yyyy-MM-dd' }}将日期格式化为“年-月-日”形式，参数可以是短格式（’shortDate’）、中格式（’medium’）或自定义模板。 -
数字过滤器（number）
对数字进行格式化，控制小数位数或添加千位分隔符。{{ 12345.6789 | number:2 }}结果为“12,345.68”。 -
字符串过滤器（uppercase/lowercase）
实现大小写转换，如{{ 'hello' | uppercase }}输出“HELLO”。 -
货币过滤器（currency）
快速格式化货币值，支持自定义符号和小数位。{{ 99 | currency:'¥' }}显示为“¥99.00”。
-
过滤数组（filter）
根据条件筛选数组元素，常用于搜索功能。{{ users | filter:{name:'John'} }}返回name属性为“John”的对象。 -
排序过滤器（orderBy）
对数组进行排序，可指定排序字段和顺序（升序/降序）。{{ products | orderBy:'price':true }}按价格降序排列。
过滤器的链式调用与参数传递
AngularJS支持多个过滤器串联使用,通过管道符连接即可。{{ ' hello world ' | uppercase | trim }} 先去除首尾空格，再转为大写，最终输出“HELLO WORLD”。
过滤器可接受参数,参数紧跟在冒号后。{{ 12345 | number:3 }} 指定保留3位小数，复杂参数可通过对象或数组传递，如{{ users | filter:{age: '>18'} }} 筛选年龄大于18的用户。
自定义过滤器的实现方式
当内置过滤器无法满足需求时,可通过filter工厂方法创建自定义过滤器，以下是一个示例：
app.filter('reverse', function() {
return function(input) {
return input.split('').reverse().join('');
};
});
使用时：{{ 'Angular' | reverse }} 输出“ralgnA”，自定义过滤器可依赖注入服务，例如使用$http从服务器获取过滤规则。
过滤器的性能优化与注意事项
- 避免滥用：过滤器在每次数据变化时都会重新执行，过度使用可能导致性能问题，建议在数据量大的场景下使用
track by或分页优化。 - 纯函数原则：过滤器应设计为纯函数，即相同输入始终返回相同输出，且无副作用。
- 与指令的配合：结合
ng-repeat和过滤器时，可使用filter作为表达式的一部分，如ng-repeat="item in items | filter:searchText"。
过滤器的常见应用场景
| 场景 | 示例代码 | 功能描述 |
|---|---|---|
| 搜索框实时筛选 | ng-repeat="item in items | filter:query" |
根据输入动态过滤列表 |
| 日期本地化显示 | {{ date | date:'fullDate' | uppercase }} |
格式化日期并转为大写 |
| 货币汇率转换 | {{ price | currency:'USD':2 }} |
按美元格式显示价格 |
AngularJS过滤器通过声明式语法简化了数据格式化逻辑,提升了代码的可读性和维护性，合理使用内置过滤器、灵活创建自定义过滤器，并注意性能优化，能够有效提升前端开发效率，在AngularJS 2+版本中，虽然过滤器的概念被管道（Pipe）替代，但其核心思想仍被延续，体现了数据转换在框架设计中的重要性，掌握过滤器的使用技巧，是构建高效AngularJS应用的关键一环。
图片来源于AI模型，如侵权请联系管理员。作者：酷小编，如若转载，请注明出处：https://www.kufanyun.com/ask/45194.html
