filter時angular開發經常接觸的一個內容，今天在wiki中做一個補全，說一下filter的使用

首先，filter分為angularJS中封裝好的filter和自定義filter
自定義的filter包括以下：

1.currency(貨幣處理)，預設是美元符號

{{num | currency : '￥'}}

2.date(日期格式化)

{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}

引數用來指定所要的格式，y M d h m s E 分別表示 年 月 日 時 分 秒 星期，你可以自由組合它們

3. filter(匹配子串) {{ childrenArray | filter : 4 }} //匹配屬性值中含有4的

4.json(格式化Json物件)

{{ jsonTest | json}}

5.limitTo(限制陣列長度或字串長度)

{{ childrenArray | limitTo : 2 }}//將會顯示陣列中的前兩項

6. lowercase(小寫) {{name | lowercase}}

7.uppercase(大寫)

{{name | uppercase}}

8.number(格式化數字)
number過濾器可以為一個數字加上千位分割，像這樣，123,456,789。同時接收一個引數，可以指定小float型別保留幾位小數：
苦於在js裡頻繁使用toFixed()的同事得救了
9.orderBy(排序)

{{ childrenArray | orderBy : 'age' }}//按age屬性值進行排序

封裝好的幾種中，主要排序，限制長度和日期格式化以及保留小數位比較有用，其餘在遇到特定需求的時候，我們可能要自定義過濾器

filter的使用
過濾器在Html中的使用就是標準的表示式後面+ | +filter的名字
比如{{ name | filter}}使用一個filter
或者{{name | filter1 | filter2 | filter3 }}使用多個filter，前一個filter的輸出是下一個filter的輸入
再或者{{ expression | filter:argument1:argument2:... }} argument1，argument2到argumentN都是filter的引數，這種是為filter傳引數
自定義filter

angular.module('starter').filter('dealer',function(){ //將物件陣列中每一項的name變為john加編號，編號為從0到陣列長度減1，然後將處理後的陣列返回
   return function(inputArray){
     for(var i=0;i<inputArray.length;i++){
      inputArray[i].name="John"+i;
   }
    return inputArray;
 }
});
angular.module('starter').filter('littledealer',function(){//將改引數擷取到只保留前兩位並返回
   return function(param){
     var a = param.substring(0,2);
     return a;
   }
});

在controller中，有陣列如下:

  $scope.items=[
  {
    name:"sss",
    age:"123"
  },
  {
    name:"sdd",
    age:"131"
  },
  {
    name:"acs",
    age:"143"
  },
  {
    name:"scx",
    age:"135"
  },
  {
    name:"768",
    age:"asd"
  }
];

在html中，我們把陣列迴圈顯示出每項的name欄位和age欄位，然後用filter過濾一下，html中程式碼如下：

<ion-view view-title="Dashboard">
  <ion-content class="padding">
     <div style="width: 100%;height: 40px;text-align: center;background-color: transparent;margin-top: 20px;" 
     ng-repeat="x in items |    dealer">
       <label style="margin-left: auto;margin-right: auto;font-size: 0.875rem;color: #4547a8;">{{x.name}}</label><br>
       <label style="margin-left: auto;margin-right: auto;font-size: 0.875rem;color: #4547a8;">{{x.age | littledealer}}</label><br>
     </div>
   </ion-content>
 </ion-view>

由於我們將陣列中的每個名字都變為john+編號，且其中每項的年齡欄位被擷取保留了前位，現在結果為：