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俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
JS常用表单验证方法总结
May 22 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
webpack项目使用eslint建立代码规范实现
May 16 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获得url参数中具有&的值的方法
2014/03/05 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
python使用xmlrpc实例讲解
2013/12/17 Python
python使用post提交数据到远程url的方法
2015/04/29 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Python timeit模块的使用实践
2020/01/13 Python
python基于win32api实现键盘输入
2020/12/09 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
高三生物教学反思
2014/01/25 职场文书
高三政治教学反思
2014/02/06 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
保护动物的标语
2014/06/11 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
小学主题班会教案
2015/08/17 职场文书
八年级作文之友谊
2019/12/02 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android