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面向对象编程之对象使用分析
Aug 19 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
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来处理多个提交任务
2006/10/09 PHP
玩转虚拟域名◎+ .
2006/10/09 PHP
PHP 彩色文字实现代码
2009/06/29 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
PHP实现递归无限级分类
2015/10/22 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
javascript中的array数组使用技巧
2010/01/31 Javascript
Javascript调用C#代码
2011/01/17 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
python实现的简单抽奖系统实例
2015/05/22 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
Python中list初始化方法示例
2016/09/18 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
Melissa香港官网:MDreams
2016/07/01 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
大学生的网上创业计划书
2013/12/31 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
小松树教学反思
2014/02/11 职场文书
中式结婚主持词
2014/03/14 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
生日寿星公答谢词
2015/09/29 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android