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 相关文章推荐
JavaScript Timer实现代码
Feb 17 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
详解python中sort排序使用
2019/03/23 Python
Python Lambda函数使用总结详解
2019/12/11 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
python中pyplot基础图标函数整理
2020/11/10 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
德国电子商城:ComputerUniverse
2017/04/21 全球购物
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
学习党章思想汇报
2014/01/07 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
工作检讨书怎么写
2014/10/10 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
党员活动总结
2015/02/04 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL