AngularJS的filter怎么用？自定义filter与常见问题详解

AngularJS 的 Filter 是框架中一个非常实用且强大的功能，它主要用于在视图中对数据进行格式化和筛选，使得数据展示更加灵活和直观，Filter 可以在模板表达式中对数据进行实时处理，无需在控制器中编写额外的格式化逻辑，从而保持控制器的简洁和关注点分离。

Filter 的基本概念与使用方式

Filter 的本质是一个函数，它接收一个输入值，经过处理后返回一个新的格式化或筛选后的值，在 AngularJS 中，Filter 主要通过两种方式在模板中使用：一是使用管道符 进行单值过滤，二是结合 filter 指令进行数组元素的筛选。

单值过滤

单值过滤主要用于对单个数据值进行格式化,例如日期格式化、货币格式化、字符串大小写转换等，其基本语法为 {{ expression | filterName : parameter1 : parameter2 }}。expression 是要处理的数据表达式，filterName 是过滤器的名称，parameter 是传递给过滤器的可选参数。

{{ 12345 | currency }} 会将数字 12345 格式化为当前货币格式的字符串（如 $12,345.00），如果需要指定货币符号，可以传入参数，如 {{ 12345 | currency:'¥' }}，结果将显示为 ¥12,345.00。

数组元素过滤

数组元素过滤通常与 ng-repeat 指令结合使用，用于从数组中筛选出符合条件的元素，AngularJS 提供了一个名为 filter 的内置过滤器，它可以根据字符串、对象或函数对数组进行筛选。

假设有一个用户数组 users，每个用户对象包含 name 和 age 属性，要筛选出名字中包含 “张” 的用户，可以使用 ng-repeat="user in users | filter:'张'"，如果要根据多个条件筛选，可以传入一个对象，如 ng-repeat="user in users | filter:{name:'张', age:25}"，这会筛选出名字包含 “张” 且年龄为 25 的用户。

内置 Filter 详解

AngularJS 提供了一系列常用的内置 Filter，覆盖了数据格式化和筛选的常见需求，以下是几个最常用的内置 Filter：

自定义 Filter 的创建与使用

虽然内置 Filter 已经很强大，但在实际开发中，我们常常会遇到一些特定的格式化或筛选需求，这时就需要创建自定义 Filter，自定义 Filter 是一个工厂函数，通过 AngularJS 的 filter 注册。

创建自定义 Filter 的基本步骤如下：

1. 使用 module.filter 方法注册 Filter：第一个参数是 Filter 的名称，第二个参数是一个工厂函数，该函数返回一个 Filter 函数。
2. 定义 Filter 函数：Filter 函数接收输入值作为第一个参数，其他参数作为后续参数，返回处理后的值。

创建一个将字符串首字母大写的 Filter：

angular.module('myApp', [])
  .filter('capitalize', function() {
    return function(input) {
      if (!input) return '';
      return input.charAt(0).toUpperCase() + input.slice(1);
    };
  });

在模板中使用时,可以这样写：{{ 'hello world' | capitalize }}，输出结果为 Hello world。

自定义 Filter 还可以接收多个参数，创建一个 Filter，用于将字符串重复指定次数：

.filter('repeat', function() {
  return function(input, times) {
    if (!input || isNaN(times)) return input;
    return new Array(times + 1).join(input);
  };
});

使用方式：{{ 'A' | repeat:5 }}，输出结果为 AAAAA。

Filter 的高级用法与注意事项

Filter 的链式调用

AngularJS 允许将多个 Filter 链式调用，使用多个管道符 分隔。{{ dateVar | date:'short' | uppercase }} 会先对日期进行短格式化，然后将结果转换为大写。

Filter 的性能优化

Filter 在每次 digest 循环中都会被执行，因此对于大型数组或复杂的 Filter 函数，可能会影响性能，为了优化性能，可以采取以下措施：

• 避免在 Filter 中执行复杂的计算逻辑，尽量将复杂逻辑放在控制器或服务中。
• 对于只读数据,可以使用 语法（一次性绑定），如 {{ ::expression | filter }}，这样 Filter 只会在初始化时执行一次。
• 如果可能,使用 track by 表达式优化 ng-repeat 的性能。

Filter 的依赖注入

自定义 Filter 可以像其他 AngularJS 组件一样依赖注入服务，如果 Filter 需要访问 $http 服务，可以在工厂函数中注入：

.filter('asyncData', function($http) {
  return function(input) {
    return $http.get(input);
  };
});

全局 Filter 与局部 Filter

Filter 可以在模块级别注册，成为全局 Filter，也可以在 config 阶段通过 $filterProvider 进行配置，还可以在指令或配置中限制 Filter 的作用域，避免全局污染。

AngularJS 的 Filter 是数据展示层的重要工具，它通过简洁的语法提供了强大的数据格式化和筛选功能，内置 Filter 覆盖了大部分常见需求，而自定义 Filter 则进一步扩展了其灵活性，在实际开发中，合理使用 Filter 可以有效减少控制器的负担，提高代码的可维护性和可读性，也需要注意 Filter 的性能影响，特别是在处理大型数据集时，应采取适当的优化措施，通过深入理解和熟练运用 Filter，开发者可以构建出更加优雅和高效的 AngularJS 应用。