AngularJS过滤器怎么用？详解及示例代码带你快速掌握。

AngularJS 过滤器是框架中一个非常实用的功能，它主要用于在模板中对数据进行格式化、筛选和转换，而无需在控制器中编写复杂的处理逻辑，过滤器通过管道符（）与表达式结合使用，语法简洁直观，能够有效提升开发效率和代码可读性。

过滤器的核心概念

过滤器本质上是一个函数,它接收输入数据，返回处理后的结果，在 AngularJS 中，过滤器可以应用于表达式、指令或模板的任何位置，其基本语法为 {{ expression | filterName : parameter1 : parameter2 ... }}，filterName 是过滤器的名称，parameter 是传递给过滤器的可选参数，AngularJS 内置了多种常用过滤器，同时也支持自定义过滤器以满足业务需求。

内置过滤器详解

AngularJS 提供了丰富的内置过滤器，覆盖了数据处理的常见场景，以下是一些核心内置过滤器的功能及示例：

1. currency（货币过滤器）
   用于将数字格式化为货币形式，支持指定货币符号和小数位数。
   示例：{{ 1234.56 | currency : "¥" : 0 }}
   输出结果：¥1,235（四舍五入并添加千分位分隔符）。

2. date（日期过滤器）
   将日期对象或时间戳格式化为指定字符串，支持多种内置格式（如 yyyy-MM-dd、shortDate 等）。
   示例：{{ 1633027200000 | date : "yyyy年MM月dd日 HH:mm" }}
   输出结果：2021年09月30日 16:00。

3. filter（筛选过滤器）
   根据条件对数组对象进行筛选，支持字符串匹配、对象属性筛选等。
   示例：{{ [{name: "Alice", age: 25}, {name: "Bob", age: 30}] | filter : {age: 25} }}
   输出结果：[{name: "Alice", age: 25}]。

   

4. orderBy（排序过滤器）
   对数组进行排序，支持按指定属性或自定义比较函数排序。
   示例：{{ [3, 1, 2] | orderBy }}
   输出结果：[1, 2, 3]（升序排列）。

5. lowercase/uppercase（大小写过滤器）
   将字符串转换为全小写或全大写形式。
   示例：{{ "Hello World" | lowercase }}
   输出结果：hello world。

过滤器的链式使用

AngularJS 支持多个过滤器串联使用，通过管道符连接，实现复杂的数据处理逻辑，先筛选数据再格式化输出：
{{ users | filter : {age: 25} | orderBy : "name" | currency : "$" }}
该表达式会先筛选出年龄为 25 的用户，按姓名排序，最后将金额格式化为美元形式。

自定义过滤器

当内置过滤器无法满足需求时,可以通过 module.filter() 方法自定义过滤器，自定义过滤器的本质是一个返回过滤函数的工厂函数，以下是一个自定义“去重过滤器”的示例：

angular.module("myApp", [])  
  .filter("unique", function() {  
    return function(input) {  
      if (!angular.isArray(input)) return input;  
      return Array.from(new Set(input));  
    };  
  });  

在模板中使用：{{ [1, 2, 2, 3] | unique }}，输出结果为 [1, 2, 3]。

过滤器的性能优化

虽然过滤器使用方便,但在处理大数据量时需注意性能问题，建议：

1. 避免在循环中频繁调用复杂过滤器；
2. 优先使用 ng-repeat 的 track by 减少 DOM 操作；
3. 对于纯前端筛选,可结合 filter 和 orderBy 过滤器减少数据量后再渲染。

AngularJS 过滤器通过声明式语法简化了数据处理流程，内置过滤器覆盖了常见场景，而自定义过滤器则提供了极大的灵活性，合理使用过滤器不仅能提升代码可维护性，还能让业务逻辑与视图层解耦，是 AngularJS 开发中不可或缺的工具。