angularjs中的过滤器filter用法完全解析_angularjs

angularjs中的过滤器filter用法完全解析_angularjs

ID:30766313

大小:130.08 KB

页数:7页

时间:2019-01-03

angularjs中的过滤器filter用法完全解析_angularjs_第1页
angularjs中的过滤器filter用法完全解析_angularjs_第2页
angularjs中的过滤器filter用法完全解析_angularjs_第3页
angularjs中的过滤器filter用法完全解析_angularjs_第4页
angularjs中的过滤器filter用法完全解析_angularjs_第5页
资源描述:

《angularjs中的过滤器filter用法完全解析_angularjs》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库

1、AngularJS中的过滤器filter用法完全解析在AngularJS的世界里,filter提供了一种格式化数据的方法,Angular也提供给我们了很多内建的过滤器,并且建立自定义过滤器也是相当的简单在HTML的模板绑定{{}}屮,我们使用丨来调用过滤器,比如,我们想让字符串全部大写字符显示:{{name

2、uppercase}}SeeitAriLernerARILERNER当然了,我们也可以在JavaScript中使用$filter服务来调用过滤器,还拿字符串大写来举例:app.control1er('DemoControl1er,,['$scope'

3、,'$filter,,function($scopc,$filtcr){$scope・name=$filter(,lowercase,)('Ari,);}]);如何传递参数到filter呢?只需要把参数放在filter之后,中间加个冒号(如果有多个参数要传递,在每个参数后加上冒号)比如,数字过滤器可以帮助我们限制数字的位数,如果想显示两位小数,加上number:2就可以了{{123.456789

4、number:2}}filter过滤器主要用來过滤一个数组数据并返回一个包含了数组数据的新数组。比如,在客户端搜索时,我们可以快速的从数组中过滤出我们想要的结果

5、。这个filter方法接收一个string,object,或者function参数用来选择/移除数组元素。下满我们具体来看:一,内置的过滤器1,uppercase,lowercase大小转换{{"lowercapstring"

6、uppercase}}//结果:LOWERCAPSTRING{{"TANKisGOOD"

7、lowercase}}//结果:tankisgoodI这里的竖线是一种管道功能,如果对lirmx比较熟悉的话,这块的丨根lirmx的管道功能,基本是一样的2,json格式化{{{foo:〃bar〃,baz:23}

8、json}}//结果:{〃f

9、oo〃:"bar",〃baz〃:23}注意:bza没格式前是没有双引号的,格式化后就转换成了json数据了。3,date格式化mysql时间戳ng-bind二〃message,time*1000

10、date/yyyy-mm-dd,z,{{1304375948024{{1304375948024{{13043759480246:39AMdate:'medium'}}//May03,201106:39:08PMdate}}//结果:May3,2011date:〃MM/dd/yyyy@}}//结果:05/03/2011@{{130437594802406:39:

11、08date:,zyyyy-MM-ddhh:mm:ss?,}}//结果:2011-05-034,number格式化{{1.234567number:1}}//结果:1.2{{1234567number}}//结果:1,234,5673,currency货币格式化{{250

12、currency}}{{250

13、currency:,ZRMBY//结果:$250.00}}//结果:RMB¥250.003,filter查找只能查value,不能查key{{[{"age":20,"id":10,ame?,:"iphone"},iage:12,id:11,name:su

14、nmxing),{"age":44,"id":12,"name,z:"testabc"}]Ifilter's'}}//查找含有有s的彳亍//上例结果:[{"age":12,〃id〃:11,"name":〃sunmxing〃},{"age":44,"id":12,"name":气eslabc"}]{{[{"age":20,〃id〃:10,"name":"iphonc"},{〃age":44,〃id〃:12,"name":"testabc,z}]

15、filter:{'name'ip'}}}//查找name1ikeip的行//上例结果:[{"age":20,"i

16、d":10,"name":"iphone"}]$filterCnumber')(30000,2);varjsonString二$"lter('json')({"age":12,〃id〃:11,〃name":〃simmxing〃},{"age":44,"id":12,"name":气eslabc'3])3,limitTo字符串,对像的截取{{"ilovetank,z

17、limitTo:6}}//结果:ilove{{"ilovetank"

18、limitTo:-4}}//结果:tank{{[{"age":20,〃id〃:10,"name":"iphone"},1a

19、ge:1厶id:11,name:sunmxingj,12,z,name,/:"t

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。