AngularJS的内置过滤器详解


Posted in Javascript onMay 14, 2015

今天我们来了解一下AngularJS的内置过滤器

先来看看这些内置过滤器使用方法:

一个过滤器,不带参数的情况
{{expression | filter}}

一个过滤器,带参数的情况
{{expression | filter:arguments}}

一个过滤器,带多个参数的情况
{{expression | filter: arg1: arg2: ...}}

多个过滤器,不带参数的情况
{{expression | filter1 | filter2 | ...}}

下面我们分别使用以下AngularJS的内置过滤器

currency

currency允许我们设置自己的货币符号,默认情况下会采用客户端所处区域的货币符号。
可以这样使用:{{ 3600 | currency: "$¥"}}
返回结果为$¥123.00
online code点击预览

number

number过滤器将数字格式化成文本,它的参数是可选的,用来控制小数点后的截取位数
如果传入的是一个非数字字符,会返回空字符串
可以这样使用:{{ 3600 | number:2}}
返回结果为:3,600.00
online code点击预览

lowercase

lowercase将字符串转换为小写
可以这样使用:{{ "HEllo" | lowercase}}
返回结果为:hello
online code点击预览

uppercase

uppercase将字符串转换为大写
可以这样使用:{{ "HEllo" | uppercase}}
返回结果为:HELLO
online code点击预览

json

json过滤器可以将一个JSON或者JavaScript对象转换成字符串。
这个过滤器对调试相当有用
可以这样使用:{{ {"name":"dreamapple","language":"AngularJS"} | json}}
返回结果为:{ "name": "dreamapple", "language": "AngularJS" }
online code点击预览

date

date过滤器将日期过滤成你想要的格式,这个实在是很好的过滤器。
这个过滤器用法很多我这里列举几种常用的
{{ today | date: "yyyy - mm - dd"}}
结果为:2015 - 15 - 13
{{ today | date: "yyyy - mm - dd HH:mm::ss"}}
结果为:2015 - 18 - 13 20:18::38
[online code](2015 - 18 - 13 20:18::38)

还有三个内置的过滤器,但是使用稍微复杂一点,放在下一篇文章中我们大家一起探讨吧

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
不错的JS中变量相关的细节分析
Aug 13 Javascript
jQuery实现的类flash菜单效果代码
May 17 Javascript
jquery validate使用攻略 第四步
Jul 01 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
react-router中的属性详解
Jun 01 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 #Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 #Javascript
javascript基于DOM实现权限选择实例分析
May 14 #Javascript
javascript中DOM复选框选择用法实例
May 14 #Javascript
JS对字符串编码的几种方式使用指南
May 14 #Javascript
jQuery的基本概念与高级编程
May 14 #Javascript
javascript实现简单的省市区三级联动
May 14 #Javascript
You might like
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
原生js实现轮播图
2017/02/27 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
Python字典操作简明总结
2015/04/13 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
Django中的Model操作表的实现
2018/07/24 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
C语言编程题
2015/03/09 面试题
应聘护士自荐信
2013/10/21 职场文书
小学音乐教学反思
2014/02/05 职场文书
审计班子对照检查材料
2014/08/27 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
工程资料员岗位职责
2015/04/13 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js