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