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 常用关键字列表集合
Dec 04 Javascript
JavaScript学习笔记记录我的旅程
May 23 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
vue实现简易音乐播放器
Aug 14 Vue.js
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
CI配置多数据库访问的方法
2016/03/28 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
Series和DataFrame使用简单入门
2019/11/13 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
python/golang 删除链表中的元素
2020/09/14 Python
scrapy头部修改的方法详解
2020/12/06 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
三年级数学教学反思
2014/01/31 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
停水通知
2015/04/16 职场文书
公积金贷款承诺书
2015/04/30 职场文书
2019个人工作总结
2019/06/21 职场文书
导游词之五台山
2019/10/11 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
java实现对Hadoop的操作
2021/07/01 Java/Android