AngularJS自定义过滤器怎么写？简单示例代码分享

AngularJS作为一款经典的前端框架,其强大的过滤器（Filter）功能为数据展示提供了极大的便利，自定义过滤器更是允许开发者根据业务需求灵活处理数据，实现特定的格式化或转换逻辑，下面通过一个简单示例，详细介绍如何在AngularJS中实现自定义过滤器。

过滤器基础

在AngularJS中,过滤器主要用于模板（HTML）中，通过管道符（）将数据传递给过滤器进行处理。{{ name | uppercase }}会将变量name的值转换为大写，AngularJS内置了多种过滤器，如currency（货币格式）、date（日期格式）、filter（子数组过滤）等，但有时这些内置过滤器无法满足复杂业务需求，此时就需要自定义过滤器。

自定义过滤器的创建方式

自定义过滤器通过AngularJS模块的filter方法进行定义，基本语法为：

angular.module('myApp').filter('filterName', function() {
    return function(input, params) {
        // 过滤逻辑
        return processedInput;
    };
});

• 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>

过滤器的应用场景

自定义过滤器广泛应用于以下场景：

1. 数据格式化：如日期、货币、数字的特定格式显示。
2. 数据转换：如字符串大小写转换、单位换算等。
3. 数据筛选：结合数组过滤，实现复杂的数据筛选逻辑。
4. 国际化处理：根据语言环境显示不同格式的数据。

注意事项

1. 性能优化：避免在过滤器中执行复杂计算或异步操作，过滤器在每次数据变化时都会触发，频繁执行可能影响性能。
2. 依赖注入：若过滤器需要依赖其他服务（如$http），需在工厂函数中声明依赖，

   app.filter('myFilter', function($http) {
       return function(input) {
           // 使用$http
       };
   });

3. 单元测试：建议为自定义过滤器编写单元测试，确保逻辑正确性，可使用angular.mocks模块模拟依赖。

通过上述示例可以看出,AngularJS自定义过滤器的实现简单直观，能够有效分离数据处理逻辑与视图展示，提升代码的可维护性和复用性，开发者只需掌握filter方法的定义规则和过滤函数的编写技巧，即可轻松应对各种数据格式化需求，在实际项目中，合理运用自定义过滤器，能够让代码更加简洁、高效。