AngularJS - 过滤器

过滤器,也就是展示数据之前对其过滤一番。
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
posted @ 2015-01-24 17:57  Kavlez  阅读(949)  评论(0编辑  收藏
visit:click tracking