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使用指南之dom.js
Jan 10 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
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
PHP实现微信提现功能
2018/09/30 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
Python 文件管理实例详解
2015/11/10 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
基于python调用psutil模块过程解析
2019/12/20 Python
python时间日期操作方法实例小结
2020/02/06 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
商务日语毕业生自荐信
2013/11/23 职场文书
项目合作计划书
2014/01/09 职场文书
趣味活动策划方案
2014/02/08 职场文书
小学六年级学生评语
2014/04/22 职场文书
感恩的演讲稿
2014/05/06 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
行政前台岗位职责
2015/04/16 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
行政介绍信范文
2015/05/04 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
签约仪式致辞
2015/07/30 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
防止web项目中的SQL注入
2021/12/06 MySQL