AngularJS开发指南13：AngularJS的过滤器详解
AngularJS过滤器是用来格式化输出数据的。除了格式化数据，过滤器还能修改DOM。这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作。
比如，你可能有些数据在输出之前需要根据进行本地化。你可以向下面这样使用链式的过滤器来传递表达式：
name | uppercase这个表达式执行时会将name的值传递给uppercase过滤器。
写一个你自己的过滤器非常容易：在你的模块中注册一个新的过滤器（可注入的）工厂函数就行了。这个工厂函数必须返回一个新的过滤器函数，这个过滤函数的第一个参数接受的是输入。任何过滤器参数都会被当成附加的参数传递给过滤器。
下面的例子展示了逆转字符串文本。另外，它有条件地将文本大写。
<!doctype html>
<html ng-app="MyReverseModule">
<head>
<script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<input ng-model="greeting" type="greeting"><br>
No filter: {{greeting}}<br>
Reverse: {{greeting|reverse}}<br>
Reverse + uppercase: {{greeting|reverse:true}}<br>
</div>
</body>
</html>
script.js:
angular.module('MyReverseModule', []).
filter('reverse', function() {
return function(input, uppercase) {
var out = "";
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
}
// conditional based on optional argument
if (uppercase) {
out = out.toUpperCase();
}
return out;
}
});
function Ctrl($scope) {
$scope.greeting = 'hello';
}
过滤器可用在任何api或者ng.$rootScoe.Scope的执行过程中，不过一般用来格式化绑定在模板中的表达式。
{{ expression | filter }}过滤器一般在处理过程中将数据转变成新的格式。它能使用链式风格，还能接受附加参数。
你可以像下面这样使用链式风格：
{{ expression | filter1 | filter2 }}你也可以使用“:”来传递额外的参数给过滤器，比如，将数字123格式化成带有2位小数的形式：
123 | number:2下面有些例子，展示了使用不同过滤器格式化之前和之后的样子：
- 无过滤器: {{1234.5678}} => 1234.5678
- 数字过滤器: {{1234.5678|number}} => 1,234.57. 注意"，"号和四舍五入后的后两位。
- 带参数的过滤器: {{1234.5678|number:5}} => 1,234.56780. 过滤器可以接受额外的参数，参数写在“:”的后面。比如，
number过滤器接受数值型参数来制定需要展示几位小数。
加油！
AngularJS开发指南13：AngularJS的过滤器详解的更多相关文章
- AngularJS开发指南4：指令的详解
指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML元素关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. AngularJS有一套完整的.可扩展的.用来 ...
- 移动IM开发指南2：心跳指令详解
<移动IM开发指南>系列文章将会介绍一个IM APP的方方面面,包括技术选型.登陆优化等.此外,本文作者会结合他在网易云信多年iOS IM SDK开发的经验,深度分析实际开发中的各种常见问 ...
- MVC过滤器详解
MVC过滤器详解 APS.NET MVC中(以下简称"MVC")的每一个请求,都会分配给相应的控制器和对应的行为方法去处理,而在这些处理的前前后后如果想再加一些额外的逻辑处理. ...
- Asp.Net MVC学习总结之过滤器详解（转载）
来源:http://www.php.cn/csharp-article-359736.html 一.过滤器简介 1.1.理解什么是过滤器 1.过滤器(Filters)就是向请求处理管道中注入额外的 ...
- [ 转载 ] Java开发中的23种设计模式详解(转)
Java开发中的23种设计模式详解(转) 设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类 ...
- 最锋利的Visual Studio Web开发工具扩展：Web Essentials详解
原文:最锋利的Visual Studio Web开发工具扩展:Web Essentials详解 Web Essentials是目前为止见过的最好用的VS扩展工具了,具体功能请待我一一道来. 首先,从E ...
- js课程 1-3 Javascript变量类型详解
js课程 1-3 Javascript变量类型详解 一.总结 一句话总结:js对象点(属性方法),json对象冒号(属性方法).属性和方法区别只有一个括号. 1.json对象中的函数的使用? 函数名 ...
- Wireshark过滤器详解
Wireshark过滤器详解 1.Wireshark主要提供两种主要的过滤器 捕获过滤器:当进行数据包捕获时,只有那些满足给定的包含/排除表达式的数据包会被捕获 显示过滤器:该过滤器根据指定的表达式用 ...
- AngularJS开发指南16：AngularJS构建大型Web应用详解
AngularJS是由Google创建的一种JS框架,使用它可以扩展应用程序中的HTML功能,从而在web应用程序中使用HTML声明动态内容.在该团队工作的软件工程师Brian Ford近日撰写了一篇 ...
随机推荐
- hdu 1028 Ignatius and the Princess III(DP)
Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ...
- linux搭建一个配置简单的nginx反向代理服务器 2个tomcat
1.我们只要实现访问nginx服务器能跳转到不同的服务器即可,我本地测试是这样的, 在nginx服务器里面搭建了2个tomcat,2个tomcat端口分别是8080和8081,当我输入我nginx服务 ...
- 《TCP/IP详解 卷一》读书笔记-----TCP超时重传
1.TCP提供的是可靠传输,它通过接收方发送一个确认报文ACK来提供这种可靠性.但是数据报文和确认报文都可能会丢失,所以TCP会给发出的数据报文设置一个时间,如果超时了则进行重传 2.Karn's A ...
- PAT 1063 Set Similarity (25)
题意:给你n个集合,k次询问,每次询问求两个集合的(交集)/(并集). 思路:k有2000,集合大小有10000.先将每个集合排序,对每个询问分别设两个指针指向两个集合的头.设a[i]为指针1的值,b ...
- JMeter学习参数化User Defined Variables与User Parameters
偶然发现JMeter中有两个元件(User Defined Variables与User Parameters)很相近,刚开始时我也没注意,两者有什么不同.使用时却发现两者使用场景有些不同,现在小结一 ...
- Android 屏幕适配（二）增强版百分比布局库(percent-support-lib)
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 一 概述 上周一我们发布了Andr ...
- Android SQLite (二) 基本用法
在Android开发中SQLite起着很重要的作用,网上SQLite的教程有很多很多,不过那些教程大多数都讲得不是很全面.本人总结了一些SQLite的常用的方法,借着论坛的大赛,跟大家分享分享的. 一 ...
- laravel记录
1.使用数据库事务的时候需要传递参数,使用了use关键字,否则的话传递不进去,代码如下: public function postVote(Request $request){ $data = $re ...
- 两种方式判断类的存在→className getAttribute
通过className获取 var p = document.getElementsByTagName('p'); for(var i = 0;i <p.length;i++){ if(p[i] ...
- [Erlang37]error/1 exit/1 exit/2 throw/1的区别
1. error/1 主要是系统用来定义内部错误的: Erlang内建的run time error 一共有10种: function_clause/case_clause/if_clause/bad ...