创建 AngularJS 自定义过滤器，带自定义参数

Angularjs过滤器是 angularjs非常棒的特性之一。有朝一日，你可能需要使用自定义过滤器，幸运的是，你找到了这篇博文。下面显示的是自定义过滤器长什么样子（请注意myfilter）:<tr ng-repeat="friend in friends |myfilter:"param1":"param2":true:"windowScopedFilter"">我们的自定义过滤器叫做 "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"的处理流程由 "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"）; // filter if （5<=args.length） { return window[args[4]]（input）; } return input; }; }）;上面的代码大多都log了（译者注：将信息显示到控制台）. 实际完成过滤的最重要的一部分是: // filter if （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"）; // filter if （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>带你走近AngularJS系列：

带你走近AngularJS - 基本功能介绍 http://www.linuxidc.com/Linux/2014-05/102140.htm
带你走近AngularJS - 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
带你走近AngularJS - 创建自定义指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中对控制器进行单元测试 http://www.linuxidc.com/Linux/2013-12/94166.htm在 AngularJS 应用中通过 JSON 文件来设置状态 http://www.linuxidc.com/Linux/2014-07/104083.htmAngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htmAngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 http://www.linuxidc.com/Linux/2014-07/104402.htmAngularJS 的详细介绍：请点这里
AngularJS 的下载地址：请点这里本文永久更新链接地址：http://www.linuxidc.com/Linux/2014-07/104609.htm