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 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 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
ftp类(myftp.php)
2006/10/09 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
php调用C代码的实现方法
2014/03/11 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
HTML颜色选择器实现代码
2010/11/23 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
python人人网登录应用实例
2014/09/26 Python
python获取目录下所有文件的方法
2015/06/01 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
python 安装移动复制第三方库操作
2020/07/13 Python
python实现三壶谜题的示例详解
2020/11/02 Python
python中yield的用法详解
2021/01/13 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
企业统计员岗位职责
2013/12/13 职场文书
公司贷款承诺书
2014/05/30 职场文书
介绍信的格式
2015/01/30 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
Python基础知识之变量的详解
2021/04/14 Python
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers