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 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
jquery禁用右键示例
Apr 28 Javascript
JS出现失效的情况总结
Jan 20 Javascript
jQuery操作之效果详解
May 19 jQuery
js随机生成一个验证码
Jun 01 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 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
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
php mssql 时间格式问题
2009/01/13 PHP
常用PHP框架功能对照表
2014/10/23 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
Python学习笔记之常用函数及说明
2014/05/23 Python
深入理解Python对Json的解析
2017/02/14 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
python交互式图形编程实例(二)
2017/11/17 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
用python对oracle进行简单性能测试
2020/12/05 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
Europcar比利时:租车
2019/08/26 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
Weblogic和WebSphere不同特点
2012/05/09 面试题
初中生个人学习的自我评价
2013/12/04 职场文书
先进党支部事迹材料
2014/12/24 职场文书
联谊会开场白
2015/06/01 职场文书