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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
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
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
python实现的一个p2p文件传输实例
2014/06/04 Python
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
Django之form组件自动校验数据实现
2020/01/14 Python
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
2014年元旦促销活动方案
2014/02/22 职场文书
机关搬迁方案
2014/05/18 职场文书
申报材料格式
2014/12/30 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android
Java版 单机五子棋
2022/05/04 Java/Android