angularJS過濾器，angularjs

angularJS過濾器，angularjs

一、過濾器的作用

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

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

◇給過濾器傳參數：

    <h3>貨幣格式</h3>

    {{123|currency}}

   

    <H3>小數位元</H3>

    {{123.3213132|number:2}}

   

    <H3>大寫轉換</H3>

{{'tanzhenngqiang'|uppercase}}

   <H3>小寫轉換</H3>

 {{'TANZHENGQIANG'|lowercase}}

 

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

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

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

 

二、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}}