文档章节

angularjs内置过滤器

wzbonly
 wzbonly
发布于 2017/01/24 14:49
字数 493
阅读 2
收藏 0

1、filter (过滤)
{{[{name:’coolcao’,age:23},{name:’lily’,age:20},{name:’tom’,age:22}] | filter:’coolcao’}}
结果:[{“name”:”coolcao”,”age”:23}]
如果要精确过滤,例如只要name为coolcao的可以使用如下:
{{[{name:’coolcao’,age:23},{name:’lily’,age:22},{name:’tom’,age:22}] | filter:{‘name’:’coolcao’} }}
注意:filter 对象使用的大括号和angularjs取值所用的大括号之间要留至少一个空格(就是最后三个大括号倒数第三个和倒数1,2两个大括号之前留至少一个空格,不
然angularjs会解析错误)

{{ [{“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”}]

日期
{{1423130269432 | date:’yyyy-MM-dd HH:mm:ss’}}
时间
{{ 3.1415926 | number:1 }}
{{ 3.1415926 | number:2 }}
{{ -3.1415926 | number:2 }}
{{ 3 | number:2 }}
{{ 0.002 | number:2 }}
{{ 0.009 | number:2 }}
{{ 1234567 | number }} //结果:1,234,567
{{1000 | number}}
{{1000 | number:2}}
4、orderBy 排列
{{[{name:’coolcao’,age:23},{name:’lily’,age:20},{name:’tom’,age:22}] | orderBy:’age’}}
[{“name”:”lily”,”age”:20},{“name”:”tom”,”age”:22},{“name”:”coolcao”,”age”:23}]
默认是升序排列,如果要倒序:
{{[{name:’coolcao’,age:23},{name:’lily’,age:20},{name:’tom’,age:22}] | orderBy:’age’:true}}
或者:
{{ [{“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升序排
5、json格式化
{{[{name:’coolcao’,age:23},{name:’lily’,age:22},{name:’tom’,age:22}] | json}}
结果:[ { “name”: “coolcao”, “age”: 23 }, { “name”: “lily”, “age”: 22 }, { “name”: “tom”, “age”: 22 } ]
大小写转换: uppercase,lowercase
{{‘abc’ | uppercase}}
7、currency : 货币的格式化
{{1000 | currency }} $1,000.00
{{1000 | currency:”RMB ¥” }} RMB ¥1,000.00
8、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”}]

© 著作权归作者所有

wzbonly
粉丝 0
博文 3
码字总数 859
作品 0
崇明
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
190
0
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
309
2
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
读书笔记“使用AngularJs开发下一代web应用”

国内一个挺好的读书笔记 http://www.sunzhongwei.com/angularjs.html 源码下载地址https://github.com/shyamseshadri/angularjs-book Angular SEO http://www.yearofmoo.com/2012/11/angula......

lilugirl
2014/01/06
1K
0
angular.js,backbone.js,ember.js区别

1 backbone. 对于初学者来说,我非常建议首先学习backbone 而不是jQuery. 因为jQuery提供的功能是操作DOM和Ajax数据传输. 而Backbone的功能和目的仅仅是提供一个javascript的MVC 实际针对Web...

造化玉碟
2014/04/05
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

一起来学Java8(四)——复合Lambda

在一起来学Java8(二)——Lambda表达式中我们学习了Lambda表达式的基本用法,现在来了解下复合Lambda。 Lambda表达式的的书写离不开函数式接口,复合Lambda的意思是在使用Lambda表达式实现函...

猿敲月下码
23分钟前
7
0
debian10使用putty配置交换机console口

前言:Linux的推广普及,需要配合解决实际应用方能有成效! 最近强迫自己用linux进行实际工作,过程很痛苦,还好通过网络一一解决,感谢各位无私网友博客的帮助! 系统:debian10 桌面:xfc...

W_Lu
54分钟前
10
0
aelf Enterprise 0.8.0 beta有奖公测,“Bug奖金计划”重磅开启

2019年9月30日,aelf Enterprise 0.8.0 beta版正式发布。aelf Enterprise 0.8.0 beta是一个完备的区块链系统, 包含完备的区块链系统、开发套件、开发文档、以及配套的基础应用和基础服务。 ...

AELF开发者社区
55分钟前
10
0
oracle 初始化数据库脚本

create user lpf identified by 123456; create tablespace lpf_ts_cms datafile '/opt/app/oracle/product/11.2.0/lpf.dbf' size 200M; alter user lpf default tablespace lpf_ts_cms; sel......

internetafei
今天
8
0
深入了解Redis底层数据结构

说明 说到Redis的数据结构,我们大概会很快想到Redis的5种常见数据结构:字符串(String)、列表(List)、散列(Hash)、集合(Set)、有序集合(Sorted Set),以及他们的特点和运用场景。不过它们是...

TurboSanil
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部