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

 　　这篇文章主要介绍了使用AngularJS创建自定义的过滤器的方法,AngularJS是非常热门的JavaScript库,需要的朋友可以参考下

　　Angularjs过滤器是 angularjs非常棒的特性之一。有朝一日，你可能需要使用自定义过滤器，幸运的是，你找到了这篇博文。

　　下面显示的是自定义过滤器长什么样子(请注意myfilter):

　　我们的自定义过滤器叫做 "myfilter", 它有由 ':'隔开的4个参数.

　　这是一个将会用到的样本输入:

　　?

1
2
3
4
5
6

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

　　?

1
2
3
4
5
6

Name Phone
John 555-1276
Mike 555-4321
Adam 555-5678
David 555-8765
Mikay 555-5678

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

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

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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了(译者注：将信息显示到控制台). 实际完成过滤的最重要的一部分是:

　　?

1
2
3
4
5

// filter
if (5<=args.length) {
return window[args[4]](input);
}
return input;

　　"return window[args[4]](input)" 调用第四个参数, 它是 'windowScopedFilter'.

　　这是控制台输出:

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

　　完整代码:

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<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>
时间： 2024-12-04 02:00:57

使用AngularJS创建自定义的过滤器的方法的相关文章

AngularJS创建自定义指令的方法详解_AngularJS

本文实例讲述了AngularJS创建自定义指令的方法.分享给大家供大家参考,具体如下: 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令,比如说n

带你走近AngularJS - 创建自定义指令

带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------------------------------------------------------------------------------------------ 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有Angu

PowerPoint 2013中创建自定义路径动画的方法

  PowerPoint 2013中创建自定义路径动画的方法            1.在幻灯片中选择对象,在"动画"选项卡的"高级动画"组中单击"添加动画"按钮,在打开的下拉列表中选择"自定义路径"选项,如图1所示. 图1 选择"自定义路径"选项 2.此时鼠标指针变为十字形,在幻灯片中单击创建路径起点,然后按住左键移动鼠标,在适当位置单击创建拐点,绘制到路径终点后双击结束路径的绘制,此时动画会预览一次,幻

在Django框架中自定义模板过滤器的方法_perl

自定义过滤器就是有一个或两个参数的Python函数:     (输入)变量的值     参数的值, 可以是默认值或者完全留空 例如,在过滤器 {{ var|foo:"bar" }} 中 ,过滤器 foo 会被传入变量 var 和默认参数 bar. 过滤器函数应该总有返回值. 而且不能触发异常,它们都应该静静地失败. 如果出现错误,应该返回一个原始输入或者空字符串,这会更有意义. 这里是一些定义过滤器的例子: def cut(value, arg): "Removes all

Dreamweaver8创建自定义代码片段的方法

dreamweaver|dreamweaver8|创建 一个好的"偷懒"方法,就好比充满困难的路途中出现一盏明灯,简化了好多繁杂的工作,让你有更多精力做其他事情,做的更顺手. DW作为网页制作的辅助工具之一,已经被人们逐渐掌握并灵活使用,它本身集成了好多实用的东西,给我们的工作带来了很多便利,每当有朋友问我"如何开始学做网页,要看什么书,从哪里入手?"我都会推荐他看DW"帮助"中的"Dreamweaver 入门",这是最实用的

Zend Framework实现自定义过滤器的方法

本文实例讲述了Zend Framework实现自定义过滤器的方法.分享给大家供大家参考,具体如下: 创建自定义的过滤器 代码: <?php require_once 'Zend/Filter/Interface.php'; class MyFilter implements Zend_Filter_Interface{ public function filter($value){ $badlist = array("梨","草莓","苹果"

详细阐述利用ASP.NET 2.0创建自定义Web控件开发说明

asp.net|web|创建|控件|控件开发 简介 从使用基本的文本编辑器到创作标记页面,Web 开发已经经历了一个漫长的过程.目前,集成开发环境 (IDE) 为开发过程中的几乎每个方面都提供了图形化表示形式.此外,还实现各种说明性编程技术以提高效率并降低出现错误的几率.Visual Studio 2005 和 ASP.NET 2.0 中的控件体系结构遵循了这些编程趋势,并且提供了可靠的.可扩展的环境,该环境设计为使开发人员可以创建能够以说明方式配置的控件. 此外,ASP.NET 中新的自适应呈

利用 ASP.NET 2.0 创建自定义 Web 控件

asp.net|web|创建|控件 Jayesh Patel.Bryan Acker.Robert McGovernInfusion Development适用于:Microsoft ASP.NET 2.0Microsoft Visual Studio 2005 摘要:ASP.NET 2.0 中新的自适应呈现模型为控件编写人员提供了很多新的选项.本文展示了这些选项如何使创建 ASP.NET 的自定义控件变得比以前更加容易. 本页内容 简介 自适应呈现模型 创建自定义服务器控件 TagKey 使用

利用ASP.NET 2.0创建自定义Web控件

asp.net|web|创建|控件 从使用基本的文本编辑器到创作标记页面,Web 开发已经经历了一个漫长的过程.目前,集成开发环境 (IDE) 为开发过程中的几乎每个方面都提供了图形化表示形式.此外,还实现各种说明性编程技术以提高效率并降低出现错误的几率.Visual Studio 2005 和 ASP.NET 2.0 中的控件体系结构遵循了这些编程趋势,并且提供了可靠的.可扩展的环境,该环境设计为使开发人员可以创建能够以说明方式配置的控件. 此外,ASP.NET 中新的自适应呈现模型减少了编写