AngularJS过滤器怎么用？自定义过滤器语法与实例详解

AngularJS中的过滤器是一种强大而灵活的功能，它允许开发者在模板中对数据进行实时转换和格式化，而无需在控制器中编写额外的格式化逻辑，过滤器可以应用于表达式、指令和自定义模板中，通过管道符号（|）来调用,极大地提升了数据展示的灵活性和可维护性。

过滤器的基本用法

在AngularJS中，过滤器的基本语法是在数据表达式后加上管道符号和过滤器名称。{{ name | uppercase }}会将变量name的值转换为大写形式，过滤器还可以接受参数，参数通过冒号传递，如{{ date | date:'yyyy-MM-dd' }}，其中'yyyy-MM-dd'是传递给date过滤器的格式化参数，这种简洁的语法使得开发者能够在视图中直接处理数据,保持控制器逻辑的简洁性。

内置过滤器

AngularJS提供了多种内置过滤器，涵盖了常见的数据处理需求,以下是一些常用的内置过滤器及其功能：

1. currency：将数字格式化为货币形式，支持自定义货币符号和小数位数。{{ 1234.56 | currency:'¥' }}会显示为¥1,234.56。
2. date：格式化日期对象，支持多种预定义格式或自定义格式。{{ today | date:'shortTime' }}会显示当前时间的短格式。
3. filter：根据条件过滤数组，可以接受字符串、对象或函数作为过滤条件。{{ users | filter:'John' }}会返回名字包含”John”的用户数组。
4. json：将JavaScript对象转换为JSON字符串，常用于调试。{{ user | json }}会格式化显示user对象的结构。
5. limitTo：限制数组或字符串的长度，接受一个数字参数。{{ longText | limitTo:10 }}会截取前10个字符。
6. lowercase/uppercase：将文本转换为小写或大写。{{ 'Hello' | lowercase }}会显示为hello。
7. number：格式化数字，支持小数位数和千位分隔符。{{ 1234567 | number:2 }}会显示为1,234,567.00。
8. orderBy：对数组进行排序，可以按表达式或函数排序。{{ products | orderBy:'price' }}会按价格升序排列产品。

自定义过滤器

当内置过滤器无法满足需求时，开发者可以创建自定义过滤器，自定义过滤器通过模块的filter方法注册，本质上是一个函数，接收输入值并返回处理后的值,以下代码创建一个反转字符串的自定义过滤器：

angular.module('myApp').filter('reverse', function() {
    return function(input) {
        return input.split('').reverse().join('');
    };
});

在模板中可以这样使用：{{ 'hello' | reverse }}，输出结果为olleh，自定义过滤器可以接受多个参数，并在函数内部处理复杂的逻辑,非常适合项目中的特定需求。

过滤器的链式调用

AngularJS支持过滤器的链式调用，即多个过滤器可以同时应用于同一个数据表达式。{{ 'hello world' | uppercase | limitTo:5 }}会先转换为大写，然后截取前5个字符，最终输出HELLO，链式调用使得数据处理的流程更加清晰和灵活,但需要注意过滤器的执行顺序是从左到右。

过滤器的性能优化

虽然过滤器非常方便，但在大数据量或频繁调用的场景下，可能会影响性能,以下是一些优化建议：

1. 减少过滤器的使用：对于静态数据或不需要实时更新的数据,可以考虑在控制器中预先处理。
2. 使用track by：在ng-repeat中使用过滤器时，配合track by可以提高渲染效率。
3. 避免复杂逻辑：自定义过滤器应尽量保持简洁,避免在过滤器中执行耗时操作。

AngularJS的过滤器是数据格式化和处理的利器，通过内置过滤器和自定义过滤器的结合，开发者可以轻松实现复杂的数据展示需求，合理使用过滤器不仅能提升代码的可读性，还能保持控制器和视图的职责分离，在实际开发中，应根据项目需求选择合适的过滤器，并注意性能优化,以确保应用的流畅运行。