AngularJS自定义过滤器怎么写？demo示例有吗？

在AngularJS开发中,自定义过滤器是一个非常实用的功能，它允许开发者根据业务需求对数据进行格式化或转换，下面通过一个完整的Demo示例，详细介绍如何创建和使用自定义过滤器，帮助开发者快速掌握这一技能。

自定义过滤器的基础语法

在AngularJS中,自定义过滤器通过模块的filter方法进行注册，其基本语法为：

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

filterName是过滤器的名称，input是要处理的数据，param1、param2等是可选的参数，过滤器的核心是一个返回函数的函数，外层函数用于依赖载入，内层函数负责实际的数据处理。

Demo示例：文本格式化过滤器

假设我们需要一个能够将文本首字母大写并在末尾添加感叹号的过滤器,可以按照以下步骤实现：

创建自定义过滤器

angular.module('myApp').filter('exclaim', function() { return function(input) { if (!input) return ''; return input.charAt(0).toUpperCase() + input.slice(1) + '!'; }; });

在模板中使用

<div ng-controller="MainController as vm"> <p>原始文本：{{vm.message}}</p> <p>处理后文本：{{vm.message | exclaim}}</p> </div>

控制器中的数据

angular.module('myApp').controller('MainController', function() { this.message = 'hello world'; });

运行结果将显示：

• 原始文本：hello world
• 处理后文本：Hello world!

带参数的自定义过滤器

更复杂的场景可能需要传递参数,创建一个可以指定分隔符的数组转字符串过滤器：

定义带参数的过滤器

angular.module('myApp').filter('join', function() { return function(input, separator) { if (!angular.isArray(input)) return input; separator = separator || ','; return input.join(separator); }; });

模板中使用

<div ng-controller="MainController as vm"> <p>数组：{{vm.tags}}</p> <p>默认连接：{{vm.tags | join}}</p> <p>自定义连接符：{{vm.tags | join:' - '}}</p> </div>

控制器数据

angular.module('myApp').controller('MainController', function() { this.tags = ['Angular', 'JS', 'Filters']; });

输出结果：

• 数组：Angular,JS,Filters
• 默认连接：Angular,JS,Filters
• 自定义连接符：Angular – JS – Filters

链式过滤器的使用

AngularJS支持将多个过滤器链式调用,

<p>{{vm.text | uppercase | exclaim}}</p>

假设vm.text = 'test'，处理流程为：

1. uppercase过滤器将文本转为”TEST”
2. exclaim过滤器处理后得到”TEST!”

过滤器的性能优化建议

1. 避免复杂计算：过滤器会在每次digest周期执行，避免在其中放置性能敏感的操作。
2. 使用memoization：对于相同输入总是返回相同输出的过滤器，可以添加缓存机制。
3. 限制数据量：处理大数据集时，考虑在前端先进行数据分页或筛选。

常见问题与解决方案

通过以上示例和说明,开发者可以灵活运用自定义过滤器解决各种数据展示需求，实际开发中，建议将过滤器按功能模块分组管理，保持代码的可维护性和可读性。