在 AngularJS 中，Filter 是一种非常有用的功能，它可以对数据进行格式化、排序、过滤等操作。AngularJS 自带了一些内置的 Filter，例如 currency、date、uppercase 等，但是有时候我们需要自定义 Filter 来满足特殊的需求。本文将介绍如何自定义 Filter，并提供示例代码以供参考。
创建自定义 Filter
在 AngularJS 中，我们可以使用 filter 方法来创建自定义 Filter。该方法接受两个参数：Filter 名称和 Filter 函数。Filter 函数接受一个输入值和任意数量的参数，然后返回处理后的结果。
下面是一个简单的示例，该 Filter 将输入字符串的第一个字母转换为大写字母：
angular.module('myApp', [])
.filter('capitalize', function() {
return function(input) {
if (input) {
return input.charAt(0).toUpperCase() + input.slice(1);
}
};
});在上面的代码中，我们定义了一个名为 capitalize 的 Filter，该 Filter 接受一个字符串作为输入，并返回一个首字母大写的字符串。
使用自定义 Filter
在 AngularJS 中，我们可以通过在模板中使用管道符 | 来使用 Filter。例如，要使用上面定义的 capitalize Filter，可以在模板中这样写：
<p>{{ 'hello world' | capitalize }}</p>在上面的代码中，我们将字符串 'hello world' 传递给 capitalize Filter，然后在模板中显示结果。
自定义 Filter 的参数
除了输入值之外，Filter 函数还可以接受任意数量的参数。例如，我们可以定义一个名为 add 的 Filter，该 Filter 接受两个数字作为输入，并返回它们的和。下面是示例代码：
angular.module('myApp', [])
.filter('add', function() {
return function(input, num) {
if (input && num) {
return input + num;
}
};
});在上面的代码中，我们定义了一个名为 add 的 Filter，该 Filter 接受两个参数：输入值和一个数字。然后，我们在 Filter 函数中将这两个值相加，并返回结果。
要在模板中使用带参数的 Filter，可以在管道符后面添加参数，例如：
<p>{{ 10 | add:5 }}</p>在上面的代码中，我们将数字 10 传递给 add Filter，并将数字 5 作为参数传递给该 Filter。然后，在模板中显示结果 15。
自定义 Filter 的链式调用
在 AngularJS 中，我们可以使用链式调用来对多个 Filter 进行组合。例如，我们可以使用内置的 uppercase Filter 将输入字符串转换为大写字母，然后使用自定义的 capitalize Filter 将字符串的第一个字母转换为大写字母。下面是示例代码：
<p>{{ 'hello world' | uppercase | capitalize }}</p>在上面的代码中，我们将字符串 'hello world' 传递给 uppercase Filter，将其转换为大写字母，然后将结果传递给 capitalize Filter，将第一个字母转换为大写字母。最终，在模板中显示结果 'Hello world'。
总结
在本文中，我们介绍了如何创建和使用自定义 Filter，以及如何在 Filter 中使用参数和链式调用。自定义 Filter 是 AngularJS 中非常有用的功能，它可以帮助我们轻松地对数据进行格式化、排序、过滤等操作。希望本文对你有所帮助，让你更好地掌握 AngularJS 的 Filter 功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66835f60dc1ed1a61b44db71