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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 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计算上一个月的今天
2013/05/23 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
JavaScript实现移动端轮播效果
2017/06/06 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
python支持断点续传的多线程下载示例
2014/01/16 Python
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
Django 限制访问频率的思路详解
2019/12/24 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
《匆匆》教学反思
2014/02/22 职场文书
大学生个人求职信
2014/06/02 职场文书
教师求职简历自我评价
2015/03/10 职场文书
mysql事务隔离级别详情
2021/10/24 MySQL
MySQL窗口函数的具体使用
2021/11/17 MySQL