AngularJS自定义过滤器怎么用？经典实例总结看这里！

AngularJS作为一款经典的前端框架，其过滤器（Filter）功能为数据展示提供了灵活的格式化能力，自定义过滤器则进一步扩展了这一功能，允许开发者根据业务需求封装特定的数据处理逻辑，本文将通过多个经典实例，系统总结AngularJS自定义过滤器的用法、场景及最佳实践。

自定义过滤器的基础定义与调用

自定义过滤器通过AngularJS模块的filter方法进行注册，本质上是一个函数，接收输入值并返回处理后的结果,其基本定义语法为：

angular.module('myApp') .filter('filterName', function() { return function(input, arg1, arg2) { // 数据处理逻辑 return output; }; });

在模板中调用过滤器的语法为{{ expression | filterName:arg1:arg2 }}，也可在JavaScript中通过$filter服务调用：$filter('filterName')(input, arg1, arg2)。

文本处理类过滤器实例

首字母大写过滤器

需求：将字符串中每个单词的首字母转换为大写。

实现代码：

app.filter('capitalize', function() { return function(input) { if (!input) return ''; return input.toLowerCase().replace(/(?:^|s)S/g, function(a) { return a.toUpperCase(); }); }; });

使用示例：

<div>{{ 'hello world' | capitalize }}</div> <!-- 输出：Hello World -->

文本截取过滤器

需求：截取指定长度的文本，并添加省略号。

实现代码：

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

使用示例：

<div>{{ '这是一段很长的文本内容' | truncate:8:'...' }}</div> <!-- 输出：这是一段很... -->

数值格式化类过滤器实例

货币格式化过滤器

需求：根据指定货币符号和精度格式化数值。

实现代码：

使用示例：

<div>{{ 1234.567 | currencyFormat:'$':2 }}</div> <!-- 输出：$1234.57 -->

数字千分位过滤器

需求：为数字添加千分位分隔符。

实现代码：

app.filter('thousandSeparator', function() { return function(input) { if (isNaN(input)) return ''; return input.toString().replace(/B(?=(d{3})+(?!d))/g, ','); }; });

使用示例：

<div>{{ 1234567 | thousandSeparator }}</div> <!-- 输出：1,234,567 -->

数组处理类过滤器实例

数组分组过滤器

需求：根据指定属性将数组对象分组。

实现代码：

使用示例：

$scope.users = [ {name: 'Alice', age: 25}, {name: 'Bob', age: 25}, {name: 'Charlie', age: 30} ]; $scope.groupedUsers = $filter('groupBy')($scope.users, 'age'); // 输出：{25: [{...},{...}], 30: [{...}]}

数组去重过滤器

需求：根据指定属性对数组对象进行去重。

实现代码：

app.filter('unique', function() { return function(collection, property) { if (!collection) return []; const flags = {}; return collection.filter(function(item) { const key = property ? item[property] : item; if (flags[key]) return false; flags[key] = true; return true; }); }; });

使用示例：

<div ng-repeat="user in users | unique:'age'">{{ user.name }}</div> <!-- 输出不重复年龄的用户 -->

日期处理类过滤器实例

相对时间过滤器

需求：显示相对于当前时间的描述（如”3分钟前”）。

实现代码：

app.filter('relativeTime', function() { return function(input) { const now = new Date().getTime(); const date = new Date(input).getTime(); const diff = (now - date) / 1000; if (diff < 60) return Math.floor(diff) + '秒前'; if (diff < 3600) return Math.floor(diff / 60) + '分钟前'; if (diff < 86400) return Math.floor(diff / 3600) + '小时前'; return Math.floor(diff / 86400) + '天前'; }; });

使用示例：

<div>{{ timestamp | relativeTime }}</div> <!-- 输出：2小时前 -->

过滤器的高级用法与性能优化

链式调用与参数传递

AngularJS支持过滤器链式调用，如{{ text | uppercase | truncate:10 }}，对于多参数过滤器，通过冒号分隔参数，如{{ value | filter:arg1:arg2 }}。

过滤器的性能优化

• 避免复杂计算：过滤器在每次数据绑定时都会执行,避免在其中放置耗时操作。
• 使用memoization：对于纯函数式过滤器,可添加缓存机制避免重复计算。
• 减少DOM监听：通过$watchCollection代替$watch监听数组变化,减少过滤器执行频率。

过滤器的适用场景对比

常见问题与解决方案

1. 过滤器不生效

   • 检查模块依赖载入是否正确
   • 确认过滤器名称拼写无误
   • 验证数据格式是否符合预期

2. 参数传递失败

   • 参数中包含特殊字符时，需使用单引号包裹：{{ value | filter:'arg:with:colon' }}
   • 对象参数需通过JSON字符串传递，并在过滤器中解析

3. 内存泄漏风险

   • 在控制器销毁时通过$onDestroy事件取消过滤器相关监听
   • 避免在过滤器中创建闭包引用外部作用域变量

AngularJS自定义过滤器通过简洁的声明式语法，实现了数据展示逻辑与业务逻辑的分离，在实际开发中，应根据具体需求选择合适的过滤器类型，注重性能优化和代码复用，对于复杂的数据处理场景，可结合服务（Service）封装核心逻辑，保持过滤器的纯粹性和可维护性，掌握过滤器的经典用法和最佳实践,能够显著提升前端数据展示的灵活性和开发效率。