上一篇
AngularJS的Filter示例详解，如何自定义与使用？
AngularJS的Filter是框架中一个非常实用的功能,它允许开发者在模板中对数据进行格式化、过滤和转换，从而在前端实现数据展示的灵活控制，Filter可以应用于表达式、指令和控制器中，通过管道符（|）进行调用，极大地简化了数据处理的逻辑，本文将通过多个示例详细解析AngularJS Filter的使用方法、常见场景及自定义Filter的实现技巧。
内置Filter的核心功能
AngularJS提供了多种内置Filter,涵盖字符串处理、数值格式化、数组过滤等多个维度，以下是常用内置Filter的详细说明：
字符串处理Filter
- uppercase/lowercase：用于将字符串转换为大写或小写。
示例：{{ 'Hello' | uppercase }} 输出 HELLO。
- currency：将数值转换为货币格式，支持自定义符号和精度。
示例：{{ 1234.56 | currency:'¥' }} 输出 ¥1,234.56。
- date：格式化日期对象，支持多种预定义格式或自定义模板。
示例：{{ today | date:'yyyy-MM-dd' }}，假设today为当前日期，输出类似 2023-10-01。
数组过滤与排序Filter
- filter：根据条件过滤数组元素，支持字符串匹配、对象属性过滤等。
示例：{{ users | filter:{age:25} }}，筛选出age属性为25的用户对象。
- orderBy：对数组进行排序，可指定排序字段和顺序（升序/降序）。
示例：{{ products | orderBy:'price':true }}，按price降序排列产品列表。
分页与限制Filter
- limitTo：截取数组或字符串的前N个元素。
示例：{{ [1,2,3,4,5] | limitTo:3 }} 输出 [1,2,3]。
- slice：类似数组的slice方法，支持指定起始和结束索引。
示例：{{ 'Angular' | slice:1:4 }} 输出 ngu。
Filter链式调用与参数传递
AngularJS支持多个Filter的链式调用,通过多个管道符连接，同时Filter可接收参数以增强灵活性。
上述代码先将日期格式化为短格式（如 10/1/23），再转换为大写。
带参数的Filter示例：
{{ 3.14159 | number:2 }} <!-- 输出 3.14 -->
其中numberFilter的参数2表示保留两位小数。
自定义Filter的实现场景
当内置Filter无法满足需求时,可以自定义Filter，自定义Filter通过模块的filter方法注册，接收一个工厂函数，返回过滤逻辑。
示例1：自定义手机号格式化Filter
angular.module('myApp').filter('phoneFormat', function() { return function(phoneNumber) { if (!phoneNumber) return ''; return phoneNumber.replace(/(d{3})(d{4})(d{4})/, '$1-$2-$3'); }; });
使用方式：{{ 13812345678 | phoneFormat }}，输出 138-1234-5678。
示例2：自定义数组去重Filter
angular.module('myApp').filter('unique', function() { return function(array) { return array.filter(function(item, index, self) { return self.indexOf(item) === index; }); }; });
使用方式：{{ [1,2,2,3,4,4] | unique }}，输出 [1,2,3,4]。
Filter在控制器中的高级用法
除了在模板中使用,Filter还可以在控制器中通过依赖载入调用，适用于复杂的数据处理逻辑。
app.controller('UserCtrl', function($filter) { var users = [ {name: 'Alice', age: 25}, {name: 'Bob', age: 30} ]; var filteredUsers = $filter('filter')(users, {age: 25}); console.log(filteredUsers); // 输出 [{name: 'Alice', age: 25}] });
Filter性能优化注意事项
- 避免过度使用：在大量数据渲染时，Filter可能导致性能下降，建议优先在控制器中预处理数据。
- 合理使用缓存：对于静态数据，可通过$cacheFactory缓存过滤结果。
- 减少链式调用：多层Filter叠加会增加计算复杂度，尽量合并逻辑。
常见问题与解决方案
| 问题场景 | 原因分析 | 解决方案 |
|---|---|---|
| Filter不生效 | 模板语法错误或未正确载入模块 | 检查管道符使用和模块依赖 |
| 过滤结果为空 | 过滤条件与数据类型不匹配 | 统一数据类型或调整过滤逻辑 |
| 自定义Filter未生效 | 未正确注册或调用方式错误 | 确保Filter名称拼写正确，使用驼峰命名 |
AngularJS Filter通过简洁的语法提供了强大的数据处理能力，无论是基础的格式化还是复杂的自定义逻辑，都能有效提升开发效率，掌握内置Filter的使用、自定义Filter的编写以及性能优化技巧，能够帮助开发者构建更加健壮和可维护的前端应用，在实际项目中，应根据具体需求选择合适的Filter方案，避免过度设计，确保代码的简洁性和可读性。
