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近日撰写了一篇 ...
随机推荐
- MSBI--enlarge the DW database table volume
我们在学习MSBI的时候,经常会使用官方提供的Adventureworks和AdventureworksDW示例数据库,但是官方提供的数据量有点小, 以DW为例,Factinternetsales只有 ...
- web前端的渐进增强式开发模型
渐进增强是前端开发的根本基础.从根本的层面上讲,它可以将HTML,CSS,JavaScript这三者的功能分离开来,这能让当前的项目开一个好头.我们在创建项目的开始要将这三者分开,它们对应的称呼是结构 ...
- 关于volatile和synchronized
这个可能是最好的对比volatile和synchronized作用的文章了.volatile是一个变量修饰符,而synchronized是一个方法或块的修饰符.所以我们使用这两种关键字来指定三种简单的 ...
- SpringBoot 快速入门
本篇文章翻译来源为:http://docs.spring.io/spring-boot/docs/current-SNAPSHOT/reference/htmlsingle/ 首先springboot ...
- android studio没有org.apache.http.client.HttpClient;等包问题 解决方案
以前用Eclipse做Android开发工具一直使用apache的http做网络请求,最近换用了Android studio发现没有办法引用apache的包,下面是我引用的步骤
- java 15 -3 集合的遍历的练习
练习:用集合存储5个动物对象,并把动物对象进行遍历. 分析: A:创建动物类 a:无参构造方法 b:有参构造方法 c:get.set方法 B:创建集合对象 a:Collection animal = ...
- 4201 TortoiseSVN常用配置
在Windows下推荐使用乌龟(Tortoise)SVN客户端. TortoiseSVN 是 Subversion 版本控制系统的一个免费开源客户端,可以超越时间的管理文件和目录.文件保存在中央版本库 ...
- css3 线性渐变和径向渐变
线性渐变:ie6以下不兼容 径向渐变:只支持firefox.Chrome和Safari <!DOCTYPE html> <html> <head> <meta ...
- HTML基础 - <base>标签的使用
标签对于不是很熟悉前端的人应该还算是个生面孔吧,粗略讲讲标签的用法. 将相对路径变成绝对路径 这个对于需要借(chao)鉴(xi)别人网页的时候特别有用~ 批量设置target=_blank 当需要对 ...
- tkinter 改变按钮状态
import tkinter as tk def btn1_change_btn1(event): '''方式一:通过事件控制自己''' if event.widget['state'] == 'no ...