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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 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中使用临时表查询数据的一个例子
2013/02/03 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
laravel学习教程之存取器
2016/07/30 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
JavaScript中链式调用之研习
2011/04/07 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
JS实现点星星消除小游戏
2020/03/24 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
python实现多线程行情抓取工具的方法
2018/02/28 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
python多线程分块读取文件
2019/08/29 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
竟聘演讲稿范文
2013/12/31 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
教师求职自荐书
2014/06/14 职场文书
对照检查剖析材料
2014/09/30 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
会计实训报告范文
2014/11/04 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书