4、angularJS過濾器

一、過濾器的作用

  過濾器用來格式化需要展示給使用者的資料。

  在HTML中的模板繫結符號{{ }}內通過|符號來呼叫過濾器。例如，假設我們希望將字串轉換成大寫可以對字串中的每個字元都單獨進行轉換操作，也可以使用過濾器：{{name | uppercase }}

◇給過濾器傳引數：

    <h3>貨幣格式</h3>

    {{123|currency}}

   

    <H3>小數位數</H3>

    {{123.3213132|number:2}}

   

    <H3>大寫轉換</H3>

{{'tanzhenngqiang'|uppercase}}

   <H3>小寫轉換</H3>

 {{'TANZHENGQIANG'|lowercase}}

 

◆number過濾器將數字格式化成文字。它的第二個引數是可選的，用來控制小數點後擷取的位數。

如果傳入了一個非數字字元，會返會空字串

◆可以用|符號作為分割符來同時使用多個過濾器。

 

二、filter過濾器

   可以從給定陣列中選擇一個子集，並將其生成一個新陣列返回。這個過濾器通常用來過濾需要進行展示的元素。例如，在做客戶端搜尋時，可以從一個陣列中立刻過濾出所需的結果。

這個過濾器的第一個引數可以是字串、物件或是一個用來從陣列中選擇元素的函式。

  示例：

 ①過濾包含字母e的單詞

  {{['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}

 ②過濾物件

{{ [

{ 'name': 'Ari',

  'City': 'San Francisco',

  'favorite food': 'Pizza' },

{ 'name': 'Nate',

  'City': 'San Francisco',

  'favorite food': 'indianfood'

    }] | filter:{'favorite food': 'Pizza'} }}

③自定義函式進行過濾

◇isCapitalized函式的功能是根據首字母是否為大寫返回true或false。

$scope.isCapitalized= function(str) {

return str[0] == str[0].toUpperCase();

};

使用自定義過濾函式

{{['Ari','likes','to','travel'] | filter:isCapitalized }}

<!--["Ari"] -->

  我們也可以給filter過濾器傳入第二個引數，用來指定預期值同實際值進行比較的方式。

  第二個引數可以是以下三種情況之一。

◇true

用angular.equals(expected, actual)對兩個值進行嚴格比較。

◇ false

進行區分大小寫的子字串比較。

◇函式

執行這個函式，如果返回真值就接受這個元素。

 

★JSON過濾器

json過濾器可以將一個JSON或JavaScript物件轉換成字串。這種轉換對除錯非常有幫助，例如：

{{ {'name':'Ari', 'City': 'SanFrancisco'} | json }}

    <!--

   {

       "name": "Ari",

       "City": "San Francisco"

       }

    -->

★limitTo過濾器（擷取字串）

   limitTo過濾器會根據傳入的引數生成一個新的陣列或字串，新的陣列或字串的長度取決於傳入的引數，通過傳入引數的正負值來控制從前面還是從後面開始擷取。

  如果傳入的長度值大於被運算元組或字串的長度，那麼整個陣列或字串都會被返回。

 

例如，我們可以擷取字串的前三個字元：

{{ San Francisco is very cloudy | limitTo:3 }}

<!-- San -->

或最後的六個字元：

{{ San Francisco is very cloudy | limitTo:-6 }}

<!-- cloudy -->

對陣列也可以進行同樣的操作。返回陣列的第一個元素：

{{ ['a','b','c','d','e','f'] | limitTo:1 }}

<!--["a"] -->

 

★orderBy過濾器

orderBy過濾器可以用表示式對指定的陣列進行排序。orderBy可以接受兩個引數，第一個是必需的，第二個是可選的。第一個引數是用來確定陣列排序方向的謂詞。

下面分情況討論第一個引數的型別。

l 函式

當第一個引數是函式時，該函式會被當作待排序物件的getter方法。

l 字串

對這個字串進行解析的結果將決定陣列元素的排序方向。可以傳入+或-來強制進行升序或降序排列。

l 陣列

在排序表示式中使用陣列元素作為謂詞。對與表示式結果並不嚴格相等的每個元素，則使用第一個謂詞。

 

第二個引數用來控制排序的方向（是否逆向）。

{{ [{

   'name': 'Ari',

   'status': 'awake'

},{

   'name': 'Q',

   'status': 'sleeping'

},{

   'name': 'Nate',

   'status': 'awake'

}] | orderBy:'name' }}

結果：

[

{"name":"Ari","status":"awake"},

{"name":"Nate","status":"awake"},

{"name":"Q","status":"sleeping"}

]

也可以對排序結果進行反轉。例如，通過將第二個引數設定為true可以將排序結果進行反轉：

{{ [{

   'name': 'Ari',

   'status': 'awake'

},{

   'name': 'Q',

   'status': 'sleeping'

},{

    'name': 'Nate',

   'status': 'awake'

}] | orderBy:'name':true }}

 

三、自定義過濾器

    建立自定義過濾器需要將它放到自己的模組中。

◇實現一個過濾器，將字串第一個字母轉換為大寫。

  過濾器本質上是一個會把我們輸入的內容當作引數傳入進去的函式。上面這個例子中，我們在呼叫過濾器時簡單地把input當作字串來處理。可以在這個函式中做一些錯誤檢查：

angular.module('myApp.filters', []).filter('capitalize',function() {

    returnfunction(input) {

        // input是我們傳入的字串

       if (input) {

           return input[0].toUpperCase() + input.slice(1);

       }

 

    };

});

現在，如果想將一個句子的首字母轉換成大寫形式，可以用過濾器先將整個句子都轉換成小

寫，再把首字母轉換成大寫：

<!-- Ginger loves dog treats -->

{{ 'ginger loves dog treats' | lowercase | capitalize}}