angularJS學習小結——filter


   引言


   filter過濾器對於我們來說並不陌生,他和我們現實生活中的過濾器的意思差不多,它的作用就是接收一個輸


入的值,然後按照某個規則進行處理然後輸出最後的結果,例如我們輸入一個數字,然後我們需要得到貨幣形式的數


據,這樣我們就可以利用過濾器來實現,angularJS中的過濾器是非常簡單的,分爲內置和自定義兩種,下面小編就


簡單的給大家介紹一些。


   內置過濾器


   ng內置了一些過濾器,它們是:currency(貨幣)、date(日期)、filter(子串匹配)、json(格式化json對象)、


limitTo(限制個數)、lowercase(小寫)、uppercase(大寫)、number(數字)、orderBy(排序)。總共九種。除此之外還


可以自定義過濾器,這個就強大了,可以滿足任何要求的數據處理。下面來看一下他們的使用方法;


   1. currency (貨幣處理)


  使用currency可以將數字格式化爲貨幣,默認是美元符號,你可以自己傳入所需的符號,例如我傳入人民幣:


   {{num | currency : '¥'}}


  2. date (日期格式化)


  原生的js對日期的格式化能力有限,ng提供的date過濾器基本可以滿足一般的格式化要求。用法如下:


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


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


使用不同的個數來限制格式化的位數。另外參數也可以使用特定的描述性字符串,例如“shortTime”將會把時間格


式爲12:05 pm這樣的。ng提供了八種描述性的字符串,個人覺得這些有點多餘,我完全可以根據自己的意願組合出想


要的格式,不願意去記這麼多單詞~


  3. filter(匹配子串)


  這個名叫filter的filter(不得不說這名字起的,真讓人容易混淆——!)用來處理一個數組,然後可以過濾出


含有某個子串的元素,作爲一個子數組來返回。可以是字符串數組,也可以是對象數組。如果是對象數組,可以匹配


屬性的值。它接收一個參數,用來定義子串的匹配規則。下面舉個例子說明一下參數的用法,我用現在特別火的幾個


孩子定義了一個數組:

   

$scope.childrenArray = [
        {name:'kimi',age:3},
        {name:'cindy',age:4},
        {name:'anglar',age:4},
        {name:'shitou',age:6},
        {name:'tiantian',age:5}
    ];


$scope.func = function(e){return e.age>4;}



{{ childrenArray | filter : 'a' }} //匹配屬性值中含有a的
{{ childrenArray | filter : 4 }}  //匹配屬性值中含有4的
{{ childrenArray | filter : {name : 'i'} }} //參數是對象,匹配name屬性中含有i的
{{childrenArray | filter : func }}  //參數是函數,指定返回age>4的



  4. json(格式化json對象)


  json過濾器可以把一個js對象格式化爲json字符串,沒有參數。這東西有什麼用呢,我一般也不會在頁面上輸出


一個json串啊,官網說它可以用來進行調試,嗯,是個不錯的選擇。或者,也可以用在js中使用,作用就和我們熟悉


的JSON.stringify()一樣。用法超級簡單:


   {{ jsonTest | json}}


  5. limitTo(限制數組長度或字符串長度)


  limitTo過濾器用來截取數組或字符串,接收一個參數用來指定截取的長度,如果參數是負值,則從數組尾部開


始截取。個人覺得這個filter有點雞肋,首先只能從數組或字符串的開頭/尾部進行截取,其次,js原生的函數就可


以代替它了,看看怎麼用吧:


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


  6. lowercase(小寫)


  把數據轉化爲全部小寫。太簡單了,不多解釋。同樣是很雞肋的一個filter,沒有參數,只能把整個字符串變爲


小寫,不能指定字母。怎麼用我都懶得寫了。


  7. uppercase(大寫)


  同上。


  8. number(格式化數字)


  number過濾器可以爲一個數字加上千位分割,像這樣,123,456,789。同時接收一個參數,可以指定float類型保


留幾位小數:


{{ num | number : 2 }}


  9. orderBy(排序)


  orderBy過濾器可以將一個數組中的元素進行排序,接收一個參數來指定排序規則,參數可以是一個字符串,表


示以該屬性名稱進行排序。可以是一個函數,定義排序屬性。還可以是一個數組,表示依次按數組中的屬性值進行排


序(若按第一項比較的值相等,再按第二項比較),還是拿上面的孩子數組舉例:


<div>{{ childrenArray | orderBy : 'age' }}</div>      //按age屬性值進行排序,若是-age,則倒序
<div>{{ childrenArray | orderBy : orderFunc }}</div>   //按照函數的返回值進行排序
<div>{{ childrenArray | orderBy : ['age','name'] }}</div>  //如果age相同,按照name進行排序


  內置的過濾器介紹完了,寫的我都快睡着了。。。正如你所看到的,ng內置的過濾器也並不是萬能的,事實上好


多都比較雞肋。更個性化的需求就需要我們來定義自己的過濾器了。


   自定義過濾器


   我們需要藉助於module中的filter來定義一個函數,這個函數接收輸入值,然後經過一系列的處理返回我們想


要的結果,比如下面一個例子,實現返回數組中下標爲奇數的值。


app.filter('odditems',function(){
    return function(inputArray){
        var array = [];
        for(var i=0;i<inputArray.length;i++){
            if(i%2!==0){
                array.push(inputArray[i]);
            }
        }
        return array;
    }
});

   格式就是這樣,你的處理邏輯就寫在內部的那個閉包函數中。你也可以讓自己的過濾器接收參數,參數就定義


在return的那個函數中,作爲第二個參數,或者更多個參數也可以。


   過濾器的兩種用法


   1、在模板中使用filter



  我們可以直接在{{}}中使用filter,跟在表達式後面用 | 分割,語法如下:


{{ expression | filter }}


  也可以多個filter連用,上一個filter的輸出將作爲下一個filter的輸入(怪不得這貨長的跟管道一個樣。。)


{{ expression | filter1 | filter2 | ... }}


  filter可以接收參數,參數用 : 進行分割,如下:


{{ expression | filter:argument1:argument2:... }}


  除了對{{}}中的數據進行格式化,我們還可以在指令中使用filter,例如先對數組array進行過濾處理,然後再


循環輸出:


<span ng-repeat="a in array | filter ">

   

 2. 在controller和service中使用filter



  我們的js代碼中也可以使用過濾器,方式就是我們熟悉的依賴注入,例如我要在controller中使用currency過濾


器,只需將它注入到該controller中即可,代碼如下:


   app.controller('testC',function($scope,currencyFilter){
    $scope.num = currencyFilter(123534);  
}


  在模板中使用{{num}}就可以直接輸出$123,534.00了!在服務中使用filter也是同樣的道理。


  此時你可能會有疑惑,如果我要在controller中使用多個filter,難道要一個一個注入嗎,這豈不太費勁了?小


兄弟莫着急~ng提供了一個$filter服務可以來調用所需的filter,你只需注入一個$filter就夠了,使用方法如下:


app.controller('testC',function($scope,$filter){
    $scope.num = $filter('currency')(123534);
  $scope.date = $filter('date')(new Date(),"yyyy-MM-dd hh:mm:ss EEEE");  
}


  可以達到同樣的效果。好處是你可以方便使用不同的filter了。


   小結


   以上是關於angularJS中過濾器的一些基本用法,都非常的簡單,小編在這整理一下會印象深刻一些,filter的


學習沒有什麼難的地方,到時候我們可以直接查詢相關的文檔就可以了。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章