使用AngularJS创建自定义的过滤器的方法

Angularjs过滤器是 angularjs非常棒的特性之一。有朝一日，你可能需要使用自定义过滤器，幸运的是，你找到了这篇博文。

下面显示的是自定义过滤器长什么样子(请注意myfilter):

我们的自定义过滤器叫做 "myfilter",它有由 ':'隔开的4个参数.

这是一个将会用到的样本输入:

rush:js;"> $scope.friends = [{name:'John',phone:'555-1276'},{name:'Annie',phone:'800-BIG-MARY'},{name:'Mike',phone:'555-4321'},{name:'Adam',phone:'555-5678'},{name:'David',phone:'555-8765'},{name:'Mikay',phone:'555-5678'}];

过滤器只显示电话号码中含有 "555"的项，这是样本输出:

rush:js;"> Name Phone John 555-1276 Mike 555-4321 Adam 555-5678 David 555-8765 Mikay 555-5678

过滤"555"的处理流程由 "windowScopedFilter"执行,它是过滤器 'myfilter'的第四个参数.

下面我们来实现这些功能 (把logging添加到每个输入参数):

rush:js;"> var myapp = angular.module('MyFilterapp',[]); myapp.filter('myfilter',function() { return function(input,param1) { console.log("------------------------------------------------- begin dump of custom parameters"); console.log("input=",input); console.log("param1(string)=",param1); var args = Array.prototype.slice.call(arguments); console.log("arguments=",args.length); if (3<=args.length) { console.log("param2(string)=",args[2]); } if (4<=args.length) { console.log("param3(bool)=",args[3]); } console.log("------------------------------------------------- end dump of custom parameters"); // filter if (5<=args.length) { return window[args[4]](input); } return input; }; });

上面的代码大多都log了(译者注：将信息显示到控制台). 实际完成过滤的最重要的一部分是:

rush:js;"> // filter if (5<=args.length) { return window[args[4]](input); } return input;

"return window[args[4]](input)" 调用第四个参数,它是 'windowScopedFilter'.

这是控制台输出:

rush:js;">

"------------------------------------------------- begin dump of custom parameters" custom_filter_function.html:21
"input=" [object Array] custom_filter_function.html:22
"param1(string)=" "param1" custom_filter_function.html:23
"arguments=" 5 custom_filter_function.html:25
"param2(string)=" "param2" custom_filter_function.html:27
"param3(bool)=" true custom_filter_function.html:30
"------------------------------------------------- end dump of custom parameters" custom_filter_function.html:32
"------------------------------------------------- begin dump of custom parameters" custom_filter_function.html:21
"input=" [object Array] custom_filter_function.html:22
"param1(string)=" "param1" custom_filter_function.html:23
"arguments=" 5 custom_filter_function.html:25
"param2(string)=" "param2" custom_filter_function.html:27
"param3(bool)=" true custom_filter_function.html:30
"------------------------------------------------- end dump of custom parameters" custom_filter_function.html:32

完整代码:

rush:js;"> terapp">

NamePhonearam1':'param2':true:'windowScopedFilter'">