AngularJS过滤器filter用法有哪些常见场景和注意事项？

AngularJS过滤器filter用法分析

AngularJS作为一款经典的前端框架，其过滤器（Filter）功能为数据展示提供了强大的格式化和筛选能力，过滤器本质上是一个函数，用于接收输入数据，按照特定逻辑处理后返回格式化或筛选后的结果，本文将详细分析AngularJS过滤器的核心用法、内置过滤器的功能实现、自定义过滤器的创建方式，以及在实际项目中的高级应用技巧。

过滤器的基础语法与使用场景

在AngularJS中，过滤器主要通过模板中的表达式（Expression）或JavaScript代码中的$filter服务调用，模板中的基本语法为{{ expression | filterName : parameter1 : parameter2... }}，其中竖线表示应用过滤器，冒号用于传递参数。{{ 12345 | currency }}会将数字格式化为货币形式（如$12,345）。

过滤器常用于以下场景：

1. 数据格式化：如日期、数字、货币的标准化显示；
2. 数据筛选：如从数组中根据条件提取子集；
3. 数据排序：如对数组元素进行升序或降序排列；
4. 文本处理：如字符串大小写转换、截取等。

内置过滤器的功能详解

AngularJS提供了9种内置过滤器，覆盖了大部分常见的数据处理需求。

文本处理类过滤器

• uppercase/lowercase：转换字符串大小写。

  <p>{{ 'Hello' | uppercase }}</p> <!-- 输出: HELLO -->  

• limitTo：截取字符串或数组的部分内容。

  <p>{{ 'AngularJS' | limitTo: 3 }}</p> <!-- 输出: Ang -->  

数值处理类过滤器

• number：格式化数字，可指定小数位数。

  <p>{{ 3.14159 | number: 2 }}</p> <!-- 输出: 3.14 -->  

• currency：添加货币符号，支持自定义符号和精度。

  <p>{{ 99 | currency: '¥' }}</p> <!-- 输出: ¥99.00 -->  

数组与对象处理类过滤器

• filter：根据条件筛选数组元素，支持字符串、对象或函数作为条件。

  <div ng-repeat="user in users | filter: {age: '>25' }">  
    {{ user.name }}  
  </div>  

• orderBy：对数组进行排序，可指定排序字段和顺序（reverse）。

  <div ng-repeat="item in items | orderBy: 'price': true">  
    {{ item.name }}  
  </div>  

日期处理类过滤器

• date：格式化日期对象，支持多种预定义格式或自定义模式。

  <p>{{ dateValue | date: 'yyyy-MM-dd HH:mm:ss' }}</p>  

自定义过滤器的创建与复用

当内置过滤器无法满足需求时，可通过模块的filter方法创建自定义过滤器，自定义过滤器的本质是一个接收输入参数并返回处理结果的函数。

示例：创建一个“去重”过滤器

app.filter('unique', function() {  
  return function(input) {  
    if (!angular.isArray(input)) return input;  
    return input.filter(function(item, index, self) {  
      return self.indexOf(item) === index;  
    });  
  };  
});  

使用时：

<div ng-repeat="item in items | unique">{{ item }}</div>  

自定义过滤器支持多参数传递，

app.filter('truncate', function() {  
  return function(input, length, suffix) {  
    length = length || 10;  
    suffix = suffix || '...';  
    return input.length > length ? input.substring(0, length) + suffix : input;  
  };  
});  

调用方式：{{ longText | truncate: 15: '>>' }}。

过滤器的高级应用技巧

链式调用

多个过滤器可连续使用，按从左到右的顺序执行：

{{ '  hello  ' | trim | uppercase }} <!-- 输出: HELLO -->  

在控制器中调用过滤器

除了模板声明，还可通过$filter服务在JavaScript中使用过滤器：

app.controller('DemoController', function($filter) {  
  var formattedDate = $filter('date')(new Date(), 'yyyy年MM月dd日');  
  console.log(formattedDate); // 输出: 2023年11月20日  
});  

过滤器的性能优化

• 避免在大型数组上使用复杂过滤器：如filter或orderBy可能触发大量DOM操作，建议结合分页或虚拟滚动优化。
• 缓存过滤结果：对于静态数据，可通过$cacheFactory缓存过滤后的结果，减少重复计算。

与其他AngularJS特性的结合

• ng-repeat与filter结合：实现前端动态筛选，无需后端重新请求。
• 表单验证中的过滤器：如使用lowercase统一邮箱输入格式。

常见问题与解决方案

AngularJS过滤器通过声明式语法和灵活的扩展机制，极大地简化了数据处理的复杂度，合理使用内置过滤器可以快速实现常见功能，而自定义过滤器则能满足个性化需求，在实际开发中，需注意性能优化和代码可维护性，避免过度依赖过滤器导致逻辑混乱，掌握过滤器的核心用法和高级技巧,将显著提升AngularJS应用的开发效率和用户体验。