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编写widget的一些技巧分享
Oct 28 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 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
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
php读取msn上的用户信息类
2008/12/05 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
理解Javascript闭包
2013/11/01 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
Python re模块介绍
2014/11/30 Python
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
centos7之Python3.74安装教程
2019/08/15 Python
python检测服务器端口代码实例
2019/08/31 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
房地产管理毕业生自荐信
2013/11/04 职场文书
毕业生找工作推荐信
2013/11/21 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
建筑安全标语
2014/06/07 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
组织生活会发言材料
2014/12/15 职场文书
初中团委工作总结
2015/08/13 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS