使用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"的项，这是样本输出:
NamePhone John555-1276 Mike555-4321 Adam555-5678 David555-8765 Mikay555-5678
过滤"555"的处理流程由"windowScopedFilter"执行,它是过滤器'myfilter'的第四个参数.
下面我们来实现这些功能(把logging添加到每个输入参数):
varmyapp=angular.module('MyFilterApp',[]);
myapp.filter('myfilter',function(){
returnfunction(input,param1){
console.log("-------------------------------------------------begindumpofcustomparameters");
console.log("input=",input);
console.log("param1(string)=",param1);
varargs=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("-------------------------------------------------enddumpofcustomparameters");
//filter
if(5<=args.length){
returnwindow[args[4]](input);
}
returninput;
};
});
上面的代码大多都log了(译者注：将信息显示到控制台).实际完成过滤的最重要的一部分是:
//filter
if(5<=args.length){
returnwindow[args[4]](input);
}
returninput;
"returnwindow[args[4]](input)"调用第四个参数,它是'windowScopedFilter'.
这是控制台输出:
"-------------------------------------------------begindumpofcustomparameters"custom_filter_function.html:21 "input="[objectArray]custom_filter_function.html:22 "param1(string)=""param1"custom_filter_function.html:23 "arguments="5custom_filter_function.html:25 "param2(string)=""param2"custom_filter_function.html:27 "param3(bool)="truecustom_filter_function.html:30 "-------------------------------------------------enddumpofcustomparameters"custom_filter_function.html:32 "-------------------------------------------------begindumpofcustomparameters"custom_filter_function.html:21 "input="[objectArray]custom_filter_function.html:22 "param1(string)=""param1"custom_filter_function.html:23 "arguments="5custom_filter_function.html:25 "param2(string)=""param2"custom_filter_function.html:27 "param3(bool)="truecustom_filter_function.html:30 "-------------------------------------------------enddumpofcustomparameters"custom_filter_function.html:32
完整代码:
<html>
<head>
<scriptsrc="angular.min.js"></script>
<scripttype="text/javascript">
functionwindowScopedFilter(input){
varoutput=[];
angular.forEach(input,function(v,k){
if(v.phone.contains("555")){
output.push(v);
}
});
returnoutput;
}
varmyapp=angular.module('MyFilterApp',[]);
myapp.filter('myfilter',function(){
returnfunction(input,param1){
console.log("-------------------------------------------------begindumpofcustomparameters");
console.log("input=",input);
console.log("param1(string)=",param1);
varargs=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("-------------------------------------------------enddumpofcustomparameters");
//filter
if(5<=args.length){
returnwindow[args[4]](input);
}
returninput;
};
});
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>
<bodyng-app="MyFilterApp">
<divng-controller="MyFilterController">
<tableid="searchTextResults">
<tr><th>Name</th><th>Phone</th></tr>
<trng-repeat="friendinfriends|myfilter:'param1':'param2':true:'windowScopedFilter'">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</table>
</div>
<hr>
</body>
</html>