浅析AngularJS Filter用法
系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjsfilter用法详解,感兴趣的朋友一起学习吧
Filter简介
Filter是用来格式化数据用的。
Filter的基本原型(‘|'类似于Linux中的管道模式):
{{expression|filter}}
Filter可以被链式使用(即连续使用多个filter):
{{expression|filter1|filter2|...}}
Filter也可以指定多个参数:
{{expression|filter:argument1:argument2:...}}
AngularJS内建的Filter
AngularJS内建了一些常用的Filter,我们一一来看一下。
currencyFilter(currency):
用途:格式化货币
方法原型:
function(amount,currencySymbol,fractionSize)
用法:
{{ |currency}} <!--将格式化为货币,默认单位符号为'$',小数默认位-->
{{.|currency:'¥'}}<!--将.格式化为货币,使用自定义单位符号为'¥',小数默认位-->
{{.|currency:'CHY¥':}}<!--将.格式化为货币,使用自定义单位符号为'CHY¥',小数指定位,会执行四舍五入操作-->
{{.|currency:undefined:0}}<!--将12.55格式化为货币,不改变单位符号,小数部分将四舍五入-->
dateFilter(date):
用途:格式化日期
方法原型:
function(date,format,timezone)
用法:
<!--使用ISO标准日期格式-->
{{'2015-05-20T03:56:16.887Z'|date:"MM/dd/yyyy@h:mma"}}
<!--使用13位(单位:毫秒)时间戳-->
{{1432075948123|date:"MM/dd/yyyy@h:mma"}}
<!--指定timezone为UTC-->
{{1432075948123|date:"MM/dd/yyyy@h:mma":"UTC"}}
filterFilter(filter):
用途:过滤数组
方法原型:
function(array,expression,comparator)
用法1(参数expression使用String):
<divng-init="myArr=[{name:'Tom',age:},{name:'TomSenior',age:},{name:'May',age:},{name:'Jack',age:},{name:'Alice',age:}]"> <!--参数expression使用String,将全文搜索关键字'a'--> <divng-repeat="uinmyArr|filter:'a'"> <p>Name:{{u.name}}</p> <p>Age:{{u.age}}</p> <br/> </div> </div>
用法2(参数expression使用function):
//先在Controller中定义function:myFilter $scope.myFilter=function(item){ returnitem.age===; }; <divng-repeat="uinmyArr|filter:myFilter"> <p>Name:{{u.name}}</p> <p>Age:{{u.age}}</p> <br/> </div>
用法3(参数expression使用object):
<divng-init="myArr=[{name:'Tom',age:},{name:'TomSenior',age:},{name:'May',age:},{name:'Jack',age:},{name:'Alice',age:}]"> <divng-repeat="uinmyArr|filter:{age:}"> <p>Name:{{u.name}}</p> <p>Age:{{u.age}}</p> <br/> </div> </div>
用法4(指定comparator为true或false):
<divng-init="myArr=[{name:'Tom',age:},{name:'TomSenior',age:},{name:'May',age:},{name:'Jack',age:},{name:'Alice',age:}]"> Name:<inputng-model="yourName"/> <!--指定comparator为false或者undefined,即为默认值可不传,将以大小写不敏感的方式匹配任意内容--> <!--可以试试把下面代码的comparator为true,true即大小写及内容均需完全匹配--> <divng-repeat="uinmyArr|filter:{name:yourName}:false"> <p>Name:{{u.name}}</p> <p>Age:{{u.age}}</p> <br/> </div> </div>
用法5(指定comparator为function):
//先在Controller中定义function:myComparator,此function将能匹配大小写不敏感的内容,但与comparator为false的情况不同的是,comparator必须匹配全文 $scope.myComparator=function(expected,actual){ returnangular.equals(expected.toLowerCase(),actual.toLowerCase()); } <divng-init="myArr=[{name:'Tom',age:},{name:'TomSenior',age:},{name:'May',age:},{name:'Jack',age:},{name:'Alice',age:}]"> Name:<inputng-model="yourName"/> <divng-repeat="uinmyArr|filter:{name:yourName}:myComparator"> <p>Name:{{u.name}}</p> <p>Age:{{u.age}}</p> <br/> </div> </div>
jsonFilter(json):
方法原型:
function(object,spacing)
用法(将对象格式化成标准的JSON格式):
{{{name:'Jack',age:21}|json}}
limitToFilter(limitTo):
方法原型:
function(input,limit)
用法(选取前N个记录):
<divng-init="myArr=[{name:'Tom',age:},{name:'TomSenior',age:},{name:'May',age:},{name:'Jack',age:},{name:'Alice',age:}]"> <divng-repeat="uinmyArr|limitTo:"> <p>Name:{{u.name}} <p>Age:{{u.age}} </div> </div>
lowercaseFilter(lowercase)/uppercaseFilter(uppercase):
方法原型:
function(string)
用法:
Chinahasjoinedthe{{"wto"|uppercase}}. Weallneed{{"MONEY"|lowercase}}.
numberFilter(number):
方法原型:
function(number,fractionSize)
用法:
{{"3456789"|number}} <br/> {{true|number}} <br/> {{12345678|number:1}}
orderByFilter(orderBy):
方法原型:
function(array,sortPredicate,reverseOrder)
用法:
<divng-init="myArr=[{name:'Tom',age:,deposit:},{name:'Tom',age:,deposit:},{name:'TomSenior',age:,deposit:},{name:'May',age:,deposit:},{name:'Jack',age:,deposit:},{name:'Alice',age:,deposit:}]"> <!--deposit前面的'-'表示deposit这列倒叙排序,默认为顺序排序 参数reverseOrder:true表示结果集倒叙显示--> <divng-repeat="uinmyArr|orderBy:['name','-deposit']:true"> <p>Name:{{u.name}}</p> <p>Deposit:{{u.deposit}}</p> <p>Age:{{u.age}}</p> <br/> </div> </div>
自定义Filter
和Directive一样,如果内建的Filter不能满足你的需求,你当然可以定义一个专属于你自己的Filter。我们来做一个自己的Filter:capitalize_as_you_want,该Filter会使你输入的字符串中的首字母、指定index位置字母以及指定的字母全部大写。
方法原型:
function(input,capitalize_index,specified_char)
完整的示例代码:
<!DOCTYPE> <html> <head> <scriptsrc="/Scripts/angular.js"></script> <scripttype="text/javascript"> (function(){ varapp=angular.module('ngCustomFilterTest',[]); app.filter('capitalize_as_you_want',function(){ returnfunction(input,capitalize_index,specified_char){ input=input||''; varoutput=''; varcustomCapIndex=capitalize_index||-; varspecifiedChar=specified_char||''; for(vari=;i<input.length;i++){ //首字母肯定是大写的,指定的index的字母也大写 if(i===||i===customCapIndex){ output+=input[i].toUpperCase(); } else{ //指定的字母也大写 if(specified_char!=''&&input[i]===specified_char){ output+=input[i].toUpperCase(); } else{ output+=input[i]; } } } returnoutput; }; }); })(); </script> </head> <bodyng-app="ngCustomFilterTest"> <inputng-model="yourinput"type="text"> <br/> Result:{{yourinput|capitalize_as_you_want::'b'}} </body> </html>
好了,本篇讲了AngularJS中的Filter,看完这篇后,我们可以利用好Filter非常方便的使数据能按我们的要求进行展示,从而使页面变得更生动。