过滤器,也就是展示数据之前对其过滤一番。
AngularJS提供了一些常用的过滤器,而且支持自定义过滤器。
 
在{{}}内通过|来调用filter,例如:
 
{{ 2015 | number:2 }}
其中number就是filter的名称,:后接参数。
 
 
 
内置filter
 
下面列出常用的内置过滤器。
 
number
以数字格式输出,第二个为可选参数,表示小数点后保留的位数。 包含非数字字符时使用使用可选参数会出现Syntax Error,不使用则输出空字符。
 
{{  1234.12 | number:3}} <!-- 1234.12 -->
{{  1234.12 | number}}  <!-- 1,234.12 -->
currency
以货币格式输出,包括非数字字符时出现Syntax Error。
 
{{ 1234.12 | currency }} <!-- $1,234.12 -->
lowercase/uppercase
将字符转小写/大写
 
{{ "Kavlez! 2015;" | lowercase }}  <!-- kavlez! 2015; -->
{{ "Kavlez! 2015;" | uppercase }}  <!-- KAVLEZ! 2015; -->
json
将对象转为json字符串
例如已有声明如下:
 
$scope.person = new Object();
$scope.person.firstname = 'Kavlez';
$scope.person.lastname = 'Jin'
json过滤输出:
 
{{ person | json}}
<!-- { "firstname": "Kavlez", "lastname": "Jin" } -->
limitTo
对字符串或数组进行截取
 
{{ 'Kavlez!!!!' | limitTo:6 }} <!-- Kavlez -->
{{ 'Kavlez!!!!' | limitTo:-4 }} <!-- !!!! -->
{{ ['0','1','2','3','4','5'] | limitTo:1 }} <!-- ["0"]-->
orderBy
对数组进行排序,该filter有两个参数,分别是排序依据和正逆序(可选)
 
{{ [
    {'alphabet': 'K'},
    {'alphabet': 'A'},
    {'alphabet': 'V'},
    {'alphabet': 'L'},
    {'alphabet': 'E'},
    {'alphabet': 'Z'}] 
    | orderBy:'alphabet':true }}
<!-- [{"alphabet":"Z"},{"alphabet":"V"},{"alphabet":"L"},{"alphabet":"K"},{"alphabet":"E"},{"alphabet":"A"}] -->
filter
从数组中返回指定子集
 
对象
 
{{ 
    [{'firstname':'Kavlez','lastname':'Jin'},
        {'firstname':'Ken','lastname':'Jin'}] 
| filter:{'firstname': 'n'} }}
<!-- [{"firstname":"Ken","lastname":"Jin"}]  -->
字符串
 
{{ ['K','a','v','l','e','z'] | filter:'e' }} <!-- ["e"] -->
date
以指定格式显示时间。 
首先
 
$scope.today=new Date();
试试
 
<br>{{ today | date:'medium' }}<!--  Jan 24, 2015 5:36:38 PM    -->
<br>{{ today | date:'short' }}<!--  1/24/15 5:36 PM    -->
<br>{{ today | date:'fullDate' }}<!--  Saturday, January 24, 2015     -->
<br>{{ today | date:'longDate' }}<!--  January 24, 2015   -->
<br>{{ today | date:'mediumDate' }}<!--  Jan 24, 2015   -->
<br>{{ today | date:'shortDate' }}<!--  1/24/15   -->
<br>{{ today | date:'mediumTime' }}<!--  5:36:38 PM   -->
<br>{{ today | date:'shortTime' }}<!--  5:36 PM   -->
<br>{{ today | date:'yyyy' }}<!--  2015  -->
<br>{{ today | date:'yy' }}<!--  15   -->
<br>{{ today | date:'y' }}<!--  2015  -->
<br>{{ today | date:'MMMM' }}<!--  January   -->
<br>{{ today | date:'MMM' }}<!--  Jan   -->
<br>{{ today | date:'MM' }}<!--  01  -->
<br>{{ today | date:'M' }}<!--  1  -->
<br>{{ today | date:'dd' }}<!--  24  -->
<br>{{ today | date:'d' }}<!--  24  -->
<br>{{ today | date:'EEEE' }}<!--  Saturday   -->
<br>{{ today | date:'EEE' }}<!--  Sat   -->
<br>{{ today | date:'HH'}} <!--  17  -->
<br>{{ today | date:'H'}} <!--  17  -->
<br>{{ today | date:'hh'}} <!--  05  -->
<br>{{ today | date:'h'}} <!--  5  -->
<br>{{ today | date:'mm' }}<!--  36  -->
<br>{{ today | date:'m' }}<!--  36  -->
<br>{{ today | date:'ss' }}<!--  38  -->
<br>{{ today | date:'s' }}<!--  38  -->
<br>{{ today | date:'.sss' }}<!--  .628  -->
<br>{{ today | date:'a' }}<!--  PM  -->
<br>{{ today | date:'Z' }}<!--  +0800   -->
<br>{{ today | date:'MMMd, y' }}<!--  Jan24, 2015  -->
<br>{{ today | date:'EEEE, d, M' }} <!--  Saturday, 24, 1  -->
<br>{{ today | date:'hh:mm:ss.sss' }}<!--  05:36:38.628  -->    <br>{{ today | date:'medium' }}<!--  Jan 24, 2015 5:36:38 PM    -->
<br>{{ today | date:'short' }}<!--  1/24/15 5:36 PM    -->
<br>{{ today | date:'fullDate' }}<!--  Saturday, January 24, 2015     -->
<br>{{ today | date:'longDate' }}<!--  January 24, 2015   -->
<br>{{ today | date:'mediumDate' }}<!--  Jan 24, 2015   -->
<br>{{ today | date:'shortDate' }}<!--  1/24/15   -->
<br>{{ today | date:'mediumTime' }}<!--  5:36:38 PM   -->
<br>{{ today | date:'shortTime' }}<!--  5:36 PM   -->
<br>{{ today | date:'yyyy' }}<!--  2015  -->
<br>{{ today | date:'yy' }}<!--  15   -->
<br>{{ today | date:'y' }}<!--  2015  -->
<br>{{ today | date:'MMMM' }}<!--  January   -->
<br>{{ today | date:'MMM' }}<!--  Jan   -->
<br>{{ today | date:'MM' }}<!--  01  -->
<br>{{ today | date:'M' }}<!--  1  -->
<br>{{ today | date:'dd' }}<!--  24  -->
<br>{{ today | date:'d' }}<!--  24  -->
<br>{{ today | date:'EEEE' }}<!--  Saturday   -->
<br>{{ today | date:'EEE' }}<!--  Sat   -->
<br>{{ today | date:'HH'}} <!--  17  -->
<br>{{ today | date:'H'}} <!--  17  -->
<br>{{ today | date:'hh'}} <!--  05  -->
<br>{{ today | date:'h'}} <!--  5  -->
<br>{{ today | date:'mm' }}<!--  36  -->
<br>{{ today | date:'m' }}<!--  36  -->
<br>{{ today | date:'ss' }}<!--  38  -->
<br>{{ today | date:'s' }}<!--  38  -->
<br>{{ today | date:'.sss' }}<!--  .628  -->
<br>{{ today | date:'a' }}<!--  PM  -->
<br>{{ today | date:'Z' }}<!--  +0800   -->
<br>{{ today | date:'MMMd, y' }}<!--  Jan24, 2015  -->
<br>{{ today | date:'EEEE, d, M' }} <!--  Saturday, 24, 1  -->
<br>{{ today | date:'hh:mm:ss.sss' }}<!--  05:36:38.628  -->
 
 
自定义filter
 
当然,AngularJS也支持自己义过滤器。
如Controller那样,filter也最好不要全局满天飞,我们需要定义在一个module里面。
这里写一个简单的例子:
 
var myApp = angular.module("myApp",[])
.filter('kavlezFilter',function(){
    return function(input){
        if(input){
            return 'Kavlez:\"'+input+'"';
        }
    }
});
使用该filter:
 
{{ 'Any time, Any where, Whoever or whatever you are, just bring it on'|kavlezFilter }}
输出:
 
Kavlez:"Any time, Any where, Whoever or whatever you are, just bring it on"as
分类: etc.
标签: AngularJS
绿色通道: 好文要顶 关注我 收藏该文与我联系 
Kavlez
关注 - 0
粉丝 - 15
+加关注
0
« 上一篇:Effective Java - 复合模式优于继承
posted @ 2015-01-24 17:57 Kavlez (154) 评论(0) 编辑 收藏