AngularJS过滤器filter用法总结
AngularJS作为一款经典的前端框架，其过滤器（Filter）功能在数据展示和处理中扮演着重要角色，过滤器主要用于格式化数据，如日期格式化、数字格式化、字符串处理等，同时支持自定义过滤逻辑，帮助开发者更高效地处理视图层的数据绑定，本文将详细介绍AngularJS过滤器的常用方法、内置过滤器的功能及自定义过滤器的实现方式，并总结其最佳实践。
内置过滤器详解
AngularJS提供了多种内置过滤器，可直接在模板或JavaScript中使用，以下是常用过滤器的功能及示例：
currency（货币格式化）
用于将数字格式化为货币形式，支持自定义货币符号和小数位数。
{{ 1234.56 | currency:"¥" }} <!-- 输出：¥1,234.56 -->
date（日期格式化）
将日期对象或时间戳转换为指定格式的字符串。
{{ now | date:"yyyy-MM-dd HH:mm:ss" }} <!-- 输出：2023-10-01 15:30:00 -->
filter（子数组过滤）
根据条件过滤数组，支持字符串匹配、对象属性过滤等。
<input ng-model="searchText">
<ul>
<li ng-repeat="user in users | filter:searchText">{{ user.name }}</li>
</ul>
lowercase/uppercase（大小写转换）
将字符串转换为小写或大写。
{{ "Hello World" | lowercase }} <!-- 输出：hello world -->
number（数字格式化）
格式化数字，如控制小数位数、添加千位分隔符。
{{ 12345.6789 | number:2 }} <!-- 输出：12,345.68 -->
orderBy（排序）
对数组进行排序，支持按指定字段或自定义排序规则。
<ul>
<li ng-repeat="user in users | orderBy:'age':false">
{{ user.name }} - {{ user.age }}
</li>
</ul>
过滤器的链式使用
AngularJS支持多个过滤器组合使用，通过管道符（）连接，实现复杂的数据处理。
{{ "hello world" | uppercase | filter:'L' }} <!-- 输出：HELLO -->
上述示例先转换为大写，再过滤出包含字母”L”的字符串，链式使用时，注意过滤器的执行顺序是从左到右。
自定义过滤器
当内置过滤器无法满足需求时，可通过模块的filter方法自定义过滤器，自定义过滤器的本质是一个函数，接收输入值作为参数，返回处理后的结果。
基础自定义过滤器
以下是一个自定义的truncate过滤器，用于截断字符串并添加省略号：
app.filter('truncate', function() {
return function(input, length) {
if (!input) return '';
length = length || 10;
return input.length > length ? input.substring(0, length) + '...' : input;
};
});
模板中使用：
{{ "这是一段很长的文本" | truncate:5 }} <!-- 输出：这是一段... -->
带参数的自定义过滤器
自定义过滤器可支持多个参数，例如range过滤器用于生成指定范围的数字数组：
app.filter('range', function() {
return function(input, start, end) {
start = start || 0;
end = end || input.length;
return input.slice(start, end);
};
});
模板中使用：
{{ [1,2,3,4,5] | range:1:4 }} <!-- 输出：[2,3,4] -->
过滤器在控制器中的使用
除了在模板中使用，过滤器还可通过$filter服务在控制器或服务中调用：
app.controller('DemoController', function($filter) {
var number = 1234.5678;
var formattedNumber = $filter('number')(number, 2); // 1,234.57
var date = $filter('date')(new Date(), 'yyyy-MM-dd'); // 2023-10-01
});
过滤器的性能优化
过滤器在每次数据变化时都会重新执行，若处理大数据量或复杂逻辑，可能影响性能，以下是优化建议：
- 减少链式过滤器的使用：尽量合并多个过滤逻辑为单一过滤器。
- 使用
track by优化ng-repeat：结合filter和track by减少DOM操作。 - 避免在过滤器中进行异步操作：如AJAX请求，应改用
$q服务或移至控制器处理。
过滤器的兼容性与注意事项
- AngularJS 1.x版本差异：部分过滤器（如
json）在低版本中可能不支持。 - 与Angular 2+的区别：Angular 2+已移除过滤器，改用管道（Pipe）机制，语法和实现方式不同。
- 内存泄漏风险：若过滤器中引用了外部作用域变量，需注意在销毁时清除引用。
AngularJS过滤器通过简洁的语法实现了强大的数据格式化和处理功能，内置过滤器覆盖了常见场景，而自定义过滤器则提供了灵活的扩展能力，开发者在使用时需注意性能优化和版本兼容性，合理运用过滤器可以显著提升代码的可读性和维护性，随着前端框架的演进，理解过滤器的核心思想也有助于迁移到其他框架的类似功能（如Angular的管道）。
图片来源于AI模型，如侵权请联系管理员。作者：酷小编，如若转载，请注明出处：https://www.kufanyun.com/ask/43990.html
