创建 AngularJS 自定义过滤器,带自定义参数
创建 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 - 基本功能介绍
- 带你走近AngularJS - 体验指令实例
- 带你走近AngularJS - 创建自定义指令
如何在 AngularJS 中对控制器进行单元测试
在 AngularJS 应用中通过 JSON 文件来设置状态
AngularJS 之 Factory vs Service vs Provider
AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据
AngularJS 的详细介绍:请点这里
AngularJS 的下载地址:请点这里
本文永久更新链接地址:
评论暂时关闭