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 相关文章推荐
JavaScript Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
理解 JavaScript 预解析
Oct 25 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
react-intl实现React国际化多语言的方法
Sep 27 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中的日期处理方法集锦
2007/01/02 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
javascript 跳转代码集合
2009/12/03 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
pandas带有重复索引操作方法
2018/06/08 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
python3注册全局热键的实现
2020/03/22 Python
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
岗位职责的含义
2013/11/17 职场文书
活动策划邀请函
2014/02/06 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
个人借款担保书
2014/04/02 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
地方课程教学计划
2015/01/19 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
MyBatis 动态SQL全面详解
2021/10/05 MySQL
前端JavaScript大管家 package.json
2021/11/02 Javascript