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操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
vue使用video插件vue-video-player的示例
Oct 03 Javascript
vue-router定义元信息meta操作
Dec 07 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 OPCode缓存 APC详细介绍
2010/10/12 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
php实现文件预览功能
2017/05/23 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
js实现文字滚动效果
2016/03/03 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
vue-router的两种模式的区别
2019/05/30 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
js数组的基本使用总结
2021/01/18 Javascript
python实现字符串和日期相互转换的方法
2015/05/13 Python
python如何读写json数据
2018/03/21 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
Python如何定义有可选参数的元类
2020/07/31 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
学习十八大报告感言
2014/02/28 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
安全月宣传标语
2014/10/07 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS