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正确获取元素样式详解
Aug 07 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
使用JS读秒使用示例
Sep 21 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
vue-cli配置文件——config篇
Jan 04 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
javascript实现图片轮换动作方法
Aug 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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
谈谈PHP的输入输出流
2007/02/14 PHP
学习php中的正则表达式
2014/08/17 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
python实现石头剪刀布小游戏
2021/01/20 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
Python读取csv文件实例解析
2019/12/30 Python
Python tkinter常用操作代码实例
2020/01/03 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
python 如何调用 dubbo 接口
2020/09/24 Python
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
大学生职业生涯规划书范文
2014/01/04 职场文书
小学教师听课制度
2014/02/01 职场文书
公司中秋节活动方案
2014/02/12 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
监察建议书格式
2014/05/19 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python