angularjs 过滤器filter
2012-10-31 23:36 破狼 阅读(43559) 评论(6) 编辑 收藏 举报在前面介绍angularjs已经很多了,中途由于工作和一切生活琐事,暂停了很久。今天在这里将继续angularjs讲解,这节我们来看看angularjs的过滤去filter。
在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户。比如时间本地化,或者yyyy-MM-dd HH:mm:ss格式,数字精度格式化,本地化,人名格式化等等。在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能,angularjs内部为我们提供了number等很多内置的filter。并且我们能够很轻易的自定义自己的领域filter。
如下实例:
html:
2 num:<input ng-model="num" />
3 <br/>
4 {{num | number}}
5 <br/>
6 {{num | number:2}}
7 <br/>
8 first name:<input ng-model="person.first"/>
9 <br/>
10 last name:<input ng-model="person.last"/>
11 <br/>
12 name: {{person | fullname}}
13 <br/>
14 name: {{person | fullname:"- -"}}
15 <br/>
16 name: {{person | fullname:" " | uppercase }}
17 </div>
js:
}
angular.module("app", []).controller("test", test).
filter("fullname", function() {
var filterfun = function(person, sep) {
sep = sep || " ";
person = person || {};
person.first = person.first || "";
person.last = person.last || "";
return person.first + sep + person.last;
};
return filterfun;
});
jsfiddle效果:http://jsfiddle.net/whitewolf/uCPPK/9/
在实例中首先演示了angularjs自带的number的filter使用。再同样为我们样式了如何去创建一个angularjs的filter。其实现很简单.angularjs使得扩展一切变得自然
最后说明:angularjs filters支持链式写法,如何powershell或者其他操作系统外壳语言一样的管道式模型,形如 value | filter1 | filter2。
作者:破 狼
出处:http://www.cnblogs.com/whitewolf/
本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-个人独立博客、博客园--破狼和51CTO--破狼。