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 提交和设置表单的值
Dec 19 Javascript
js倒计时小程序
Nov 05 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
代码整洁之道(重构)
Oct 25 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
如何实现js拖拽效果及原理解析
May 08 Javascript
JavaScript 装逼指南(js另类写法)
May 10 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 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
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
php中chdir()函数用法实例
2014/11/13 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
php中执行系统命令的方法
2015/03/21 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
js验证模型自我实现的具体方法
2013/06/21 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
浅谈Python的文件类型
2016/05/30 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
详解Python3注释知识点
2019/02/19 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
美国存储和组织商店:The Container Store
2017/08/16 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
服装设计专业自荐信
2014/06/17 职场文书
关爱留守儿童标语
2014/06/18 职场文书
历史学专业求职信
2014/06/19 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技