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

Angularjs过滤器是 angularjs非常棒的特性之一。有朝一日，你可能需要使用自定义过滤器，幸运的是，你找到了这篇博文。
下面显示的是自定义过滤器长什么样子（请注意myfilter）:
我们的自定义过滤器叫做 "myfilter", 它有由 ":"隔开的4个参数.
这是一个将会用到的样本输入:

$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"的项，这是样本输出:

 Name PhoneJohn 555-1276Mike 555-4321Adam 555-5678David 555-8765Mikay 555-5678

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

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

 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"）;// filterif （5<=args.length） { return window[args[4]]（input）;}return input; };}）;

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

 // filterif （5<=args.length） { return window[args[4]]（input）;}return input;

"return window[args[4]]（input）" 调用第四个参数, 它是 "windowScopedFilter".
这是控制台输出:

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

完整代码:

<html><head><script src="angular.min.js"></script><script type="text/javascript">function windowScopedFilter （input） {var output = [];angular.forEach（input, function（v,k）{ if （v.phone.contains（"555"）） { output.push（v）; }}）;return output; }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"）;// filterif （5<=args.length） { return window[args[4]]（input）;}return input; };}）;myapp.controller（"MyFilterController", ["$scope", function（$scope） { $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"}];}]）;</script></head><body ng-app="MyFilterApp"><div ng-controller="MyFilterController"><table id="searchTextResults"> <tr><th>Name</th><th>Phone</th></tr> <tr ng-repeat="friend in friends |myfilter:"param1":"param2":true:"windowScopedFilter""> <td>{{friend.name}}</td> <td>{{friend.phone}}</td> </tr></table></div><hr></body></html>