AngularJS过滤器有哪些常见用法及注意事项？

AngularJS基础知识笔记之过滤器

在AngularJS开发中,过滤器是一个核心功能，主要用于对数据进行格式化或转换，使其在视图中以更友好的方式展示，过滤器可以应用于表达式、指令以及自定义模板中，通过管道符（）调用，语法简洁且功能强大，本文将详细介绍AngularJS过滤器的使用方法、内置过滤器类型、自定义过滤器的实现以及常见应用场景。

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

AngularJS过滤器的调用方式非常灵活,主要分为以下几种：

1. 在模板中直接调用

   最常见的使用场景是在模板中通过表达式结合管道符调用过滤器，格式化日期：

   <p>{{ birthday | date:'yyyy-MM-dd' }}</p>

   date是过滤器名称，'yyyy-MM-dd'是传递给过滤器的参数。

2. 在指令中使用

   过滤器也可以与指令结合使用，例如在ng-repeat中对列表数据进行筛选和排序：

   <li ng-repeat="item in items | filter:searchText | orderBy:'name'"> {{ item.name }} </li>

   这里同时使用了filter和orderBy两个过滤器，按顺序对数据进行处理。

   

3. 在控制器或服务中调用

   通过依赖载入$filter服务，可以在JavaScript代码中手动调用过滤器：

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

内置过滤器详解

AngularJS提供了多种内置过滤器,覆盖了数据处理中的常见需求，以下是常用过滤器的功能及示例：

currency：货币格式化

将数字转换为货币格式,支持指定符号和小数位数。

<p>{{ price | currency:'¥' }}</p> <!-- 输出：¥123.45 -->

date：日期格式化

对日期对象或时间戳进行格式化,支持多种格式化模式。

<p>{{ now | date:'yyyy年MM月dd日 HH:mm:ss' }}</p> <!-- 输出：2023年10月01日 14:30:00 -->

filter：数据筛选

根据条件对数组或对象进行筛选,支持字符串、对象或函数作为筛选条件。

orderBy：排序

对数组进行排序,支持按字段名或自定义排序函数排序。

<li ng-repeat="user in users | orderBy:'age':true"> {{ user.name }} - {{ user.age }} </li> <!-- true表示降序 -->

lowercase与uppercase：大小写转换

将字符串转换为全小写或全大写。

<p>{{ message | lowercase }}</p> <p>{{ message | uppercase }}</p>

number：数字格式化

对数字进行格式化,可指定小数位数或千位分隔符。

<p>{{ 1234567.891 | number:2 }}</p> <!-- 输出：1,234,567.89 -->

limitTo：截取数组或字符串

限制数组或字符串的长度,支持正数（从头截取）和负数（从尾截取）。

<p>{{ 'Hello' | limitTo:3 }}</p> <!-- 输出：Hel -->

json：JSON格式化

将JavaScript对象转换为JSON字符串,常用于调试。

<pre>{{ user | json }}</pre>

自定义过滤器

当内置过滤器无法满足需求时,可以自定义过滤器，自定义过滤器通过module.filter()方法注册，本质上是一个函数，接收输入值并返回处理后的结果。

示例：自定义过滤器实现文本截断

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

在模板中使用：

<p>{{ longText | truncate:20 }}</p>

高级自定义过滤器：带参数的过滤器

自定义过滤器可以接收多个参数,例如实现一个根据状态筛选数据的过滤器：

app.filter('statusFilter', function() { return function(items, status) { if (!status) return items; return items.filter(function(item) { return item.status === status; }); }; });

模板调用：

<li ng-repeat="item in items | statusFilter:'active'"> {{ item.name }} </li>

过滤器的链式调用与性能优化

AngularJS支持多个过滤器链式调用,按从左到右的顺序执行。

<p>{{ data | filter:search | orderBy:'date' | limitTo:5 }}</p>

性能优化建议：

1. 避免在大型数据集上使用复杂过滤器：过滤器会在每次$digest周期中重新计算，可能影响性能。
2. 使用track by优化ng-repeat：结合过滤器时，为ng-repeat添加track by可减少DOM操作。
3. 缓存过滤结果：对于不常变化的数据，可在控制器中预先过滤并存储结果。

过滤器的常见应用场景

1. 表格数据的实时筛选与排序：通过filter和orderBy实现动态数据展示。
2. 表单数据的格式化：如日期、金额的输入格式化与显示格式化分离。
3. 多语言支持：结合自定义过滤器实现文本的国际化转换。
4. 数据脱敏：如手机号、身份证号的隐藏显示。

内置过滤器参数速查表

过滤器是AngularJS中处理数据展示的重要工具,通过内置过滤器可以快速实现常见的数据格式化需求，而自定义过滤器则提供了灵活的扩展能力，合理使用过滤器，不仅能提升代码的可读性，还能简化数据逻辑的处理，在实际开发中，需注意过滤器的性能影响，避免在频繁变化的数据上使用复杂计算，以确保应用的流畅运行。