AngularJs 常用的过滤器


Posted in Javascript onMay 15, 2017

date格式化

{{ 1304375948024 | date }}       //结果:May 3, 2011
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}  //结果:05/03/2011 @ 6:39AM
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }} //结果:2011-05-03 06:39:08

number格式化

{{ 1.234567 | number:1 }} //结果:1.2
{{ 1234567 | number }}  //结果:1,234,567

currency货币格式化

{{ 250 | currency }}     //结果:$250.00
{{ 250 | currency:"RMB ¥ " }}  //结果:RMB ¥ 250.00

filter查找

{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:'s'}} //查找含有有s的行
 
//上例结果:[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]
 
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }} //查找name为iphone的行
 
//上例结果:[{"age":20,"id":10,"name":"iphone"}]

orderBy对像排序

{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}  //根id降序排
 
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}   //根据id升序排

limitTo字符串,对像的截取

{{ "i love tank" | limitTo:6 }}   //结果:i love
{{ "i love tank" | limitTo:-4 }}   //结果:tank
 
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | limitTo:1 }}  //结果:[{"age":20,"id":10,"name":"iphone"}]

方便自己,方便他人。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
Vue实现数据表格合并列rowspan效果
Nov 30 Javascript
Vue关于数据绑定出错解决办法
May 15 #Javascript
Jquery把获取到的input值转换成json
May 15 #jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 #jQuery
jQuery返回定位插件详解
May 15 #jQuery
一个可复用的vue分页组件
May 15 #Javascript
jQuery操作css样式
May 15 #jQuery
Node.JS文件系统解析实例详解
May 15 #Javascript
You might like
聊天室php&mysql(一)
2006/10/09 PHP
xajax写的留言本
2006/11/25 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
js实现图片无缝滚动特效
2020/03/19 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
python实现合并两个数组的方法
2015/05/16 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
大学应届毕业生个人求职信
2013/09/23 职场文书
室内设计专业个人的自我评价
2013/10/19 职场文书
小学教师听课制度
2014/02/01 职场文书
运动会获奖感言
2014/02/11 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
外科护士长工作总结
2015/08/12 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书