使用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   Phone  John   555-1276  Mike   555-4321  Adam   555-5678  David   555-8765  Mikay   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