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近日撰写了一篇 ...
随机推荐
-
【笔记】js获取当前点击元素的索引
以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事 jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来 于是查了一下js 是如何 ...
-
论文阅读（Lukas Neuman——【ICDAR2015】Efficient Scene Text Localization and Recognition with Local Character Refinement）
Lukas Neuman--[ICDAR2015]Efficient Scene Text Localization and Recognition with Local Character Refi ...
-
C语言 文件操作3--文件重定向与扫描
//文件重定向和扫描 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> //fprint ...
-
Gradle基本知识点与常用配置
查看原文:http://blog.csdn.net/u010818425/article/details/52268126 本文篇幅较长,文中系统地讲解了Gradle的基本知识点以及一些常用的命令和配 ...
-
maven报错cannot change version of project facet
用Eclipse创建Maven结构的web项目的时候选择了默认的catalog,由于这个catalog比较老,用的servlet还是2.3,而现在最少也是2.5,所以经常会出现问题,在Projecdt ...
-
hdu2243考研路茫茫——单词情结
Problem Description 背单词,始终是复习英语的重要环节.在荒废了3年大学生涯后,Lele也终于要开始背单词了. 一天,Lele在某本单词书上看到了一个根据词根来背单词的方法.比如&q ...
-
04_Javascript初步第三天
事件 内联模型.脚本模型,DOM2级模型 <!--内联模型--> <input type="button" value="bt1" oncli ...
-
NET微信公众号开发环境搭建（一）-了解微信由来
公众号的应用,开发及调试环境搭建 花生壳要注册 需要二十多块钱 ,还要实名认证,估计要一两天才能审核通过 主要就是在 windows搭建测试环境 1.微信的应用场景 360百科微信简介 ht ...
-
api接口开发跨域注意事项和设置
因为跨域请求会先发送一个OPTIONS请求,所以需要判断下OPTIONS请求的就直接返回 if(strtoupper($_SERVER['REQUEST_METHOD'])== 'OPTIONS'){ ...
-
springcloud Zuul中路由配置细节
上篇文章我们介绍了API网关的基本构建方式以及请求过滤,小伙伴们对Zuul的作用应该已经有了一个基本的认识,但是对于路由的配置我们只是做了一个简单的介绍,本文我们就来看看路由配置的其他一些细节. 首先 ...