AngularJS入门教程之过滤器用法示例


Posted in Javascript onNovember 02, 2016

本文实例讲述了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入门教程之过滤器用法示例

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>

上面是笔者自定义的一个?⑹?肿?怀扇嗣癖掖笮春鹤值墓?似鳌?/p>

filterMod.filter("toRMB",function($log)...

过滤器的定义和控制器类似,我们通过AngularJs模块的filter方法来完成,第一个参数为过滤器的名称,第二个参数为过滤器实现部分,它必须返回一个数据处理函数。

var toRMB = function(input)...

这一部分为数据处理函数,input为原始输入数据,我们在该函数中对输入数据进行处理,然后return 处理过后的数据即可。

在浏览器中效果:

AngularJS入门教程之过滤器用法示例

注意:这个toRMB 过滤器只是笔者为了演示自定义过滤器的方法而编写的,还有很多不足的地方,有兴趣的读者可以自行完善。

AngularJS源码可点击此处本站下载

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
js模拟类继承小例子
Jul 17 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
js取整数、取余数的方法
May 11 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
JavaScript基础——使用Canvas绘图
Nov 02 #Javascript
js实现砖头在页面拖拉效果
Nov 20 #Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 #Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 #Javascript
jQuery图片切换动画特效
Nov 02 #Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 #Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 #Javascript
You might like
PHP语法速查表
2007/01/02 PHP
php下使用无限生命期Session的方法
2007/03/16 PHP
PHP7修改的函数
2021/03/09 PHP
js替换字符串的所有示例代码
2013/07/23 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
Python 实现简单的电话本功能
2015/08/09 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
Pytorch 实现权重初始化
2019/12/31 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
学期研究性学习个人的自我评价
2014/01/09 职场文书
暑期社会实践学生的自我评价
2014/01/09 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
室内拓展活动方案
2014/02/13 职场文书
环境建设实施方案
2014/03/14 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
融资租赁计划书
2014/04/29 职场文书
团员年度个人总结
2015/02/26 职场文书
入党积极分子群众意见
2015/06/01 职场文书
法定代表人免职证明
2015/06/24 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js