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 相关文章推荐
$.ajax json数据传递方法
Nov 19 Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 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实现微信分享朋友链接功能
2019/02/18 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
JavaScript 动态改变图片大小
2009/06/11 Javascript
Mootools 1.2教程 函数
2009/09/15 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
Vue程序调试的方法
2019/06/17 Javascript
js实现小星星游戏
2020/03/23 Javascript
python实现调用其他python脚本的方法
2014/10/05 Python
Python类属性的延迟计算
2016/10/22 Python
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
Python对excel文档的操作方法详解
2018/12/10 Python
python多线程并发实例及其优化
2019/06/27 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
会计岗位职责
2013/11/08 职场文书
教师推荐信范文
2013/11/24 职场文书
2014年个人委托书范本
2014/10/13 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
检察院起诉书
2015/05/20 职场文书
入党积极分子考察意见
2015/06/02 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
canvas 中如何实现物体的框选
2022/08/05 Javascript