资源描述:
《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