Angularjs过滤器使用详解，如何自定义过滤器实现复杂数据过滤？

AngularJS 作为一款经典的前端框架，其过滤器（Filter）是数据格式化的重要工具，能够在不改变原始数据的前提下，对视图层的数据进行实时转换和展示，本文将详细解析 AngularJS 过滤器的使用方法、核心特性及实际应用场景,帮助开发者高效掌握这一功能。

过滤器的基本语法与调用方式

AngularJS 过滤器的核心语法是在模板表达式中使用管道符连接数据与过滤器名称，基础调用格式为 {{ expression | filterName }}，expression 为需要处理的数据，filterName 为过滤器名称。{{ 12345 | currency }} 会输出 $12,345.00（默认货币格式）。

过滤器支持链式调用，多个管道符可连续使用，实现对数据的多次处理。{{ 'hello world' | uppercase | split:' ' }} 会先转换为大写，再按空格分割为数组，过滤器还可接受参数，参数格式为 {{ expression | filterName:arg1:arg2 }}，如 {{ date | date:'yyyy-MM-dd' }} 可自定义日期格式。

内置过滤器的功能详解

AngularJS 提供了多种内置过滤器，覆盖数字、日期、数组、字符串等常见数据处理需求。

数字与货币过滤器

number：格式化数字，可控制小数位数。{{ 3.14159 | number:2 }} 输出 14。
currency：添加货币符号，支持自定义符号和精度。{{ 100 | currency:'¥' }} 输出 ¥100.00。

日期过滤器

date 过滤器可将日期对象或时间戳格式化为字符串，支持多种预定义格式（如 mediumDate、shortTime）及自定义格式（yyyy年MM月dd日）。{{ 1633027200000 | date:'yyyy-MM-dd HH:mm:ss' }} 输出 2021-09-30 00:00:00。

字符串处理过滤器

uppercase/lowercase：大小写转换，如 {{ 'Angular' | uppercase }} 输出 ANGULAR。
limitTo：截取字符串或数组，如 {{ 'abcdef' | limitTo:3 }} 输出 abc。
substring：提取子字符串，需指定起始和结束位置，如 {{ 'hello' | substring:1:3 }} 输出 el。

数组过滤器

filter：根据条件筛选数组元素，支持对象属性匹配。[{name:'A',age:20},{name:'B',age:25}] | filter:{age:20} 筛选出年龄为 20 的对象。
orderBy：排序数组，可指定排序字段及正序（true）/倒序（false）。[{name:'B'},{name:'A'}] | orderBy:'name' 按名称升序排列。
json：将对象或数组转换为 JSON 字符串，便于调试。

其他常用过滤器

json：格式化 JSON 数据，支持缩进显示。
lowercase/uppercase：大小写转换。

过滤器的核心特性

实时响应式更新

过滤器与 AngularJS 的数据绑定机制深度集成，当模型数据发生变化时，过滤结果会自动更新，无需手动触发，例如输入框绑定 ng-model="price"，{{ price | currency }} 会实时显示格式化后的货币值。

支持自定义过滤器

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

app.filter('reverse', function() {
  return function(input) {
    return input.split('').reverse().join('');
  };
});

使用方式：{{ 'hello' | reverse }} 输出 olleh，自定义过滤器可支持参数，例如添加 length 参数控制反转长度。

在控制器与服务中使用过滤器

过滤器不仅限于模板，还可通过 $filter 服务在 JavaScript 代码中调用。

app.controller('DemoCtrl', function($scope, $filter) {
  $scope.formattedDate = $filter('date')(new Date(), 'yyyy-MM-dd');
});

过滤器的性能优化

避免在大型循环中使用复杂过滤器

过滤器在每次数据变化时都会重新计算，若在 ng-repeat 中使用复杂过滤器（如 filter 或 orderBy），可能导致性能问题，建议提前在控制器中处理数据，或使用 track by 优化 ng-repeat 渲染。

合理使用过滤器缓存

对于计算成本高的过滤器，可通过缓存机制避免重复计算，例如自定义过滤器时，可结合 $cacheFactory 存储中间结果。

替代方案：使用 $filter 服务

若过滤器仅在特定场景使用，可在控制器中通过 $filter 服务处理数据，减少模板中的计算负担。

实际应用场景示例

表格数据筛选与排序

在数据表格中，结合 filter 和 orderBy 过滤器实现动态筛选和排序：

<input ng-model="searchText">  
<table>  
  <tr ng-repeat="user in users | filter:searchText | orderBy:'age'">  
    <td>{{ user.name }}</td>  
    <td>{{ user.age }}</td>  
  </tr>  
</table>

时间格式化显示

在日志或消息列表中，使用 date 过滤器统一时间格式：

<div ng-repeat="log in logs">  
  <span>{{ log.timestamp | date:'HH:mm:ss' }}</span>  
  <span>{{ log.content }}</span>  
</div>

数组分组统计

结合自定义过滤器实现数组分组，例如按年龄分组用户列表：

app.filter('groupBy', function() {  
  return function(input, key) {  
    return _.groupBy(input, key);  
  };  
});

AngularJS 过滤器以其简洁的语法和强大的功能，成为数据格式化的重要工具，通过合理使用内置过滤器、自定义过滤器以及性能优化技巧，开发者可以显著提升代码的可读性和维护性，尽管 AngularJS 已逐渐被主流框架取代，但其过滤器的核心思想仍值得借鉴，为前端数据处理提供高效解决方案，在实际开发中，需根据场景选择合适的过滤器，并注意性能优化,以确保应用的流畅运行。

图片来源于AI模型，如侵权请联系管理员。作者：酷小编，如若转载，请注明出处：https://www.kufanyun.com/ask/43978.html