AngularJs轻松入门（五）过滤器
在前面几节里我们已经接触过AngularJs的表达式，表达式的作用是向视图中输出字面量或$scope对象中的属性值。在输出之前我们可以通过过滤器来格式化输出的数据。
过滤器的使用非常简单，我们看一下下面的代码：
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<title>tutorial05_1</title>
</head>
<body>
<p>{{"HELLO WORLD!"| lowercase}}</p>
<p>{{"hello world!"| uppercase}}</p>
<p>{{3.1415926| number:2}}</p>
<p>{{3011| currency}}</p>
</body>
</html>两个嵌套的大括号即为AngularJs的表达式，我们通过|字符后跟上过滤器名称来调用该过滤器。lowercase,uppercase,number,currency为AngularJs内置的过滤器。
lowercase用来把文本中的字母转换为小写，uppercase和它相反，number过滤器用来控制数字的格式，currency则把数字转换成金额格式。
我们看一下在浏览器中的效果：
AngularJs提供的内置过滤器功能很有限，下面介绍如何自定义过滤器。
<!DOCTYPE html>
<html ng-app="filterMod">
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<title>tutorial05_2</title>
</head>
<body>
<p>{{11314| toRMB}}</p>
<script>
var filterMod = angular.module("filterMod",[]);
filterMod.filter("toRMB",function($log)
{
var toRMB = function(input)
{
var RMBNum = ['零',"壹","贰","叁","肆","伍","陆","柒","捌","玖","拾","佰","仟","万","亿"];
var inputStr = input + "";
var inputArr = new Array();
for(i=0;i<inputStr.length;i++)
{
var temp = parseInt(input % 10);
inputArr.push(temp);
switch(i)
{
case 0:inputArr.push(10);
break;
case 1:inputArr.push(11);
break;
case 2:inputArr.push(12);
break;
case 3:inputArr.push(13);
break;
}
input = input / 10;
}
inputArr = inputArr.reverse();
var output = "";
for(i=0;i<inputArr.length;i++)
{
output += RMBNum[inputArr[i]];
}
return output;
}
return toRMB;
});
</script>
</body>
</html>上面是笔者自定义的一个將数字转换成人民币大写汉字的过滤器。
filterMod.filter("toRMB",function($log)...过滤器的定义和控制器类似，我们通过AngularJs模块的filter方法来完成，第一个参数为过滤器的名称，第二个参数为过滤器实现部分，它必须返回一个数据处理函数。
var toRMB = function(input)...这一部分为数据处理函数，input为原始输入数据，我们在该函数中对输入数据进行处理，然后return 处理过后的数据即可。
在浏览器中效果：
注意：这个toRMB 过滤器只是笔者为了演示自定义过滤器的方法而编写的，还有很多不足的地方，有兴趣的读者可以自行完善。
AngularJs轻松入门（五）过滤器的更多相关文章
- AngularJs轻松入门
AngularJs轻松入门系列博文:http://blog.csdn.net/column/details/angular.html AngularJs轻松入门(一)创建第一个应用 AngularJs ...
- AngularJs轻松入门（九）与服务器交互
AngularJs从Web服务器请求资源都是通过Ajax来完成,所有的操作封装在$http服务中,$http服务是只能接收一个参数的函数,这个参数是一个对象,用来完成HTTP请求的一些配置,函数返回一 ...
- AngularJs轻松入门（八）Cookies读写
虽然使用JavaScript创建和获取Cookie很简单,AngularJs还是把它作为一个单独的模块进行了封装,模块名为ngCookies,和前面的教程中做法一样,先引入angular-cookie ...
- AngularJs轻松入门（七）多视图切换
在AngularJs应用中,我们可以將html碎片写在一个单独的文件中,然后在其他页面中將该段碎片加载进来.如果有多个碎片文件,我们还可以在控制器中根据用户的操作动态的加载不同的碎片,从而达到切换视图 ...
- AngularJs轻松入门（六）表单校验
表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面 ...
- AngularJs轻松入门（四）模块化
在前面几节教程中,代码比较少,为了方便说明问题笔者將控制器代码都写在了HTML页面中,实际上这并不是什么好的编程习惯,而且可维护性差.通常的做法都是將处理业务逻辑的代码写在一个单独的JS文件中,然后在 ...
- AngularJs轻松入门（三）MVC架构
MVC应用程序架构最早于1970年起源于Smalltalk语言,后来在桌面应用程序开发中使用较为广泛,如今在WEB开发中也非常流行.MVC的核心思想是將数据的管理(Model).业务逻辑控制(Cont ...
- AngularJs轻松入门（二）数据绑定
数据绑定是AngularJs中非常重要的特性,我们看一下下面的例子: <!DOCTYPE html> <html ng-app> <head lang="en& ...
- AngularJs轻松入门（一）创建第一个应用
AngularJs是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web ...
随机推荐
- Android View 事件分发机制 源代码解析 （上）
一直想写事件分发机制的文章,无论咋样,也得自己研究下事件分发的源代码.写出心得~ 首先我们先写个简单的样例来測试View的事件转发的流程~ 1.案例 为了更好的研究View的事件转发,我们自定以一个M ...
- JAVA设计模式之【外观模式】
通过引入一个外观角色来简化客户端与子系统之间的交互. 顾客无需直接和茶叶.茶具.开水等交互,整个泡茶过程由服务员来完成,顾客只需与服务员交互即可. 通过引入一个外观角色可以降低原有系统的复杂度,同时降 ...
- ElasticSearch 深入理解 三：集群部署设计
ElasticSearch 深入理解 三:集群部署设计 ElasticSearch从名字中也可以知道,它的Elastic跟Search是同等重要的,甚至以Elastic为主要导向. Elastic即可 ...
- hdoj--2094--产生冠军（集合函数）
产生冠军 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- RabbitMq笔记（）
RabbitMq 就是类似于一个数据库样式的操作工具. rabbit解释 有用户名登录密码之类的,还可以创建用户名,创建作用文件之类的. 2. 3.
- RocketMQ学习笔记（6）----RocketMQ的Client的使用 Producer/Consumer
1. 添加依赖 pom.xml如下: <dependency> <groupId>org.apache.rocketmq</groupId> <artifa ...
- Sublime Text编辑器配置Python解释器简易教程
前天在微信上遇到一个小伙伴问我一个关于Sublime text配置Python解释器的问题,可能是初学者,对这方面还不是很懂,想使用快捷键但是徒劳一场,因为缺少Python解释器,直接按下快捷键Ctr ...
- 利用fabric批量安装kvm虚拟机及其xp
公司一批PC机需要安装多个虚拟机跑任务,搞来搞去决定用centos7安装KVM来跑.于是先折腾了一下午,利用早先搭建好的cobbler给PC机安装OS.然后fabric批量部署. 环境:centos7 ...
- 第三方-FastDFS分布式文件系统
1.什么是FastDFS? FastDFS 是用 c 语言编写的一款开源的分布式文件系统.FastDFS 为互联网量身定制, 充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标, ...
- Node_进阶_8
Node进阶第八天 一.复习 Node.js特点:单线程.异步I/O(非阻塞I/O).事件驱动(事件环). 适合的程序:就是没有太多的计算,I/O比较多的业务. 举例:留言本.考试系统.说说.图片裁切 ...