AngularJS过滤器filter用法总结，如何实现复杂过滤与自定义过滤？

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