上一篇
AngularJS自定义过滤器怎么写？简单示例代码分享
AngularJS作为一款经典的前端框架,其强大的过滤器（Filter）功能为数据展示提供了极大的便利，自定义过滤器更是允许开发者根据业务需求灵活处理数据，实现特定的格式化或转换逻辑，下面通过一个简单示例，详细介绍如何在AngularJS中实现自定义过滤器。
过滤器基础
在AngularJS中,过滤器主要用于模板（HTML）中，通过管道符（）将数据传递给过滤器进行处理。{{ name | uppercase }}会将变量name的值转换为大写，AngularJS内置了多种过滤器，如currency（货币格式）、date（日期格式）、filter（子数组过滤）等，但有时这些内置过滤器无法满足复杂业务需求，此时就需要自定义过滤器。
自定义过滤器的创建方式
自定义过滤器通过AngularJS模块的filter方法进行定义，基本语法为：
- filterName：过滤器的名称，在模板中通过该名称调用。
- 第一个函数（工厂函数）：返回一个实际的过滤函数，该函数接收input（待处理的数据）和params（可选参数）。
- 过滤函数：核心逻辑部分，处理数据后返回结果。
实战示例：格式化手机号
假设需求是将手机号格式化为XXX-XXXX-XXXX的形式，例如输入13812345678，输出138-1234-5678，以下是具体实现步骤：
定义模块和过滤器
var app = angular.module('phoneApp', []); app.filter('formatPhone', function() { return function(phoneNumber) { if (!phoneNumber) return ''; // 移除非数字字符 var cleaned = ('' + phoneNumber).replace(/D/g, ''); // 格式化处理 if (cleaned.length === 11) { return cleaned.substring(0, 3) + '-' + cleaned.substring(3, 7) + '-' + cleaned.substring(7, 11); } else { return phoneNumber; // 非标准手机号原样返回 } }; });
在HTML模板中使用
<div ng-app="phoneApp"> <input type="text" ng-model="phone" placeholder="请输入手机号"> <p>格式化后：{{ phone | formatPhone }}</p> </div>
代码解析
- 输入处理：首先检查输入是否存在，避免空值报错；通过正则表达式D移除所有非数字字符，确保处理的是纯数字字符串。
- 格式化逻辑：判断 cleaned 字符串长度是否为11位（中国大陆手机号标准长度），如果是，则按3-4-4位分割并用连接；否则直接返回原输入。
- 模板绑定：通过ng-model实现输入框与模型的双向绑定，formatPhone过滤器实时处理输入值并显示。
带参数的自定义过滤器
若需更灵活的格式化,例如支持自定义分隔符，可扩展过滤器以接收参数，例如修改手机号格式化为XXX.XXXX.XXXX：
app.filter('formatPhone', function() { return function(phoneNumber, separator) { separator = separator || '-'; // 默认分隔符为'-' if (!phoneNumber) return ''; var cleaned = ('' + phoneNumber).replace(/D/g, ''); if (cleaned.length === 11) { return cleaned.substring(0, 3) + separator + cleaned.substring(3, 7) + separator + cleaned.substring(7, 11); } return phoneNumber; }; });
模板调用方式：
<p>格式化后（点分隔）：{{ phone | formatPhone:'.' }}</p>
过滤器的应用场景
自定义过滤器广泛应用于以下场景：
- 数据格式化：如日期、货币、数字的特定格式显示。
- 数据转换：如字符串大小写转换、单位换算等。
- 数据筛选：结合数组过滤，实现复杂的数据筛选逻辑。
- 国际化处理：根据语言环境显示不同格式的数据。
注意事项
- 性能优化：避免在过滤器中执行复杂计算或异步操作，过滤器在每次数据变化时都会触发，频繁执行可能影响性能。
- 依赖载入：若过滤器需要依赖其他服务（如$http），需在工厂函数中声明依赖， app.filter('myFilter', function($http) { return function(input) { // 使用$http }; });
- 单元测试：建议为自定义过滤器编写单元测试，确保逻辑正确性，可使用angular.mocks模块模拟依赖。
通过上述示例可以看出,AngularJS自定义过滤器的实现简单直观，能够有效分离数据处理逻辑与视图展示，提升代码的可维护性和复用性，开发者只需掌握filter方法的定义规则和过滤函数的编写技巧，即可轻松应对各种数据格式化需求，在实际项目中，合理运用自定义过滤器，能够让代码更加简洁、高效。
