浅析AngularJS Filter用法

2024-03-23 16:26:02 266

系统的学习了一下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￥':}}
{{.|currency:undefined:0}}

dateFilter（date）：

用途：格式化日期

方法原型：


function(date,format,timezone)

用法：

{{'2015-05-20T03:56:16.887Z'|date:"MM/dd/yyyy@h:mma"}}

{{1432075948123|date:"MM/dd/yyyy@h:mma"}}

{{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非常方便的使数据能按我们的要求进行展示，从而使页面变得更生动。

浅析AngularJS Filter用法

热门推荐

随机推荐