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 方法自定义过滤器，自定义过滤器本质是一个函数，接收输入值作为参数，返回处理后的结果。

使用方式：{{ '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 已逐渐被主流框架取代，但其过滤器的核心思想仍值得借鉴，为前端数据处理提供高效解决方案，在实际开发中，需根据场景选择合适的过滤器，并注意性能优化,以确保应用的流畅运行。