專案中使用了angularjs框架，使用到了裡面自帶過濾器，隨便就總結了一下angularjs中常見的過濾器。

一、什麼是過濾器？

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

AngularJS有很多實用的內建過濾器，同時也提供了方便的途徑可以自己建立過濾器。 在HTML中的模板繫結符號{{ }}內通過|符號來呼叫過濾器。

例如，假設我們希望將字串轉換成大寫，可以對字串中的每個字元都單獨進行轉換操作，也可以使用過濾器：

{{ name | uppercase }}

（1）在JavaScript程式碼中可以通過$filter來呼叫過濾器。在JavaScript程式碼中使 用lowercase 過濾器：

app.controller('DemoController',['$scope','$filter',function($scope,$fi lter){

$scope.name = $filter('lowercase')('Ari');

}]);

（2）在HTML的形式使用過濾器時，如果需要傳遞引數給過濾器，只要在過濾器名字後面加冒號即可。如果有多個引數，可以在每個引數後面都加入冒號。例如，數值過濾器可以限制小數點 的位數，在過濾器後寫上:2，可以將2作為引數傳給過濾器：

<!-- 顯示：123.46 --> {{ 123.456789 | number:2 }}

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

二、常見的過濾器

1. currency  currecy過濾器可以將一個數值格式化為貨幣格式。

用{{ 123 | currency }}來將123轉化 成貨幣格式。

currecy過濾器允許我們自己設定貨幣符號。預設情況下會採用客戶端所處區域的貨幣 符號， 但是也可以自定義貨幣符號。

2.date  date過濾器可以將日期格式化成需要的格式。

(1)  mediumDate格式，下面是內建的支援本地化的日期格式：

{{ today | date:'medium' }}         <!-- Aug 09, 2013 12:09:02 PM -->

 {{ today | date:'short' }}         <!-- 8/9/1312:09PM -->

{{ today | date:'fullDate' }}      <!-- Thursday, August 09, 2013 -->

{{ today | date:'longDate' }}   <!-- August 09, 2013 -->

{{ today | date:'mediumDate' }} <!-- Aug 09, 2013 -->

{{ today | date:'shortDate' }}   <!-- 8/9/13 -->

{{ today | date:'mediumTime' }} <!-- 12:09:02 PM -->

{{ today | date:'shortTime' }} <!-- 12:09 PM --> l

(2) 年份格式化

四位年份：{{ today | date:'yyyy' }}   <!-- 2013 -->

兩位年份：{{ today | date:'yy' }} <!-- 13 -->

一位年份：{{ today | date:'y' }} <!-- 2013 --> l

(3)月份格式化

英文月份：{{ today | date:'MMMM' }} <!-- August -->

英文月份簡寫：{{ today | date:'MMM' }} <!-- Aug -->

數字月份：{{ today |date:'MM' }} <!-- 08 -->

一年中的第幾個月份：{{ today |date:'M' }}  <!-- 8 --> l

(4)日期格式化

數字日期：{{ today|date:'dd' }} <!-- 09 -->

一個月中的第幾天：{{ today | date:'d' }} <!-- 9 -->

英文星期：{{ today | date:'EEEE' }}  <!-- Thursday -->

英文星期簡寫：{{ today | date:'EEE' }} <!-- Thu --> l

(5)小時格式化

24小時制數字小時：{{today|date:'HH'}}  <!--00-->

一天中的第幾個小時：{{today|date:'H'}} <!--0-->

 12小時制數字小時：{{today|date:'hh'}} <!--12-->

上午或下午的第幾個小時：{{today|date:'h'}} <!--12--> l

(6)分鐘格式化

數字分鐘數：{{ today | date:'mm' }} <!-- 09 -->

一個小時中的第幾分鐘：{{ today | date:'m' }} <!-- 9 --> l

(7)秒數格式化

數字秒數：{{ today | date:'ss' }} <!-- 02 -->

一分鐘內的第幾秒：{{ today | date:'s' }} <!-- 2 -->

毫秒數：{{ today | date:'.sss' }} <!-- .995 --> l

(8)字元格式化

上下午標識：{{ today | date:'a' }} <!-- AM -->

四位時區標識：{{ today | date:'Z' }} <!--- 0700 -->

(9)下面是一些自定義日期格式的示例：

{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 -->

{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8-->

{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->

3. filter filter過濾器可以從給定陣列中選擇一個子集，並將其生成一個新陣列返回。

這個過濾器通常用來過濾需要進行展示的元素。例如，在做客戶端搜尋時，可以從一個數組中立刻過濾出所需 的結果。 這個過濾器的第一個引數可以是字串、物件或是一個用來從陣列中選擇元素的函式。

下面分情況介紹傳入不同型別的引數。 l

(1) 字串 返回所有包含這個字串的元素。

如果我們想返回不包含該字串的元素，在引數前加! 符號。 物件 AngularJS會將待過濾物件的屬性同這個物件中的同名屬性進行比較，如果屬性值是字串 就會判斷是否包含該字串。如果我們希望對全部屬性都進行對比，可以將$當作鍵名。函式 對每個元素都執行這個函式，返回非假值的元素會出現在新的陣列中並返回。

例如，用下面的過濾器可以選擇所有包含字母e的單詞：

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }} <!-- ["Lerner","Likes","Eat"] -->

(2)物件，可以使用上面提到的物件過濾器。

例如，如果有一個由people物件組成的 陣列，每個物件都含有他們喜歡吃的食物的列 表，

那麼可以用下面的形式進行過濾：

{{ [{ 'name': 'Ari', 'City': 'San Francisco', 'favorite food': 'Pizza' },

{'name': 'Nate','City': 'San Francisco','favorite food': 'indian food'}] | filter:{'favorite food': 'Pizza'} }} <!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] --> ]

(3)也可以用自定義函式進行過濾（在這個例子中函式定義在$scope上）：

{{ ['Ari','likes','to','travel'] | filter:isCapitalized }} <!-- ["Ari"] -->

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

具體如下所示：

$scope.isCapitalized = function(str) { return str[0] == str[0].toUpperCase(); };

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

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

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

4. json json過濾器可以將一個JSON或JavaScript物件轉換成字串。

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

<!-- {  "name": "Ari",  "City": "San Francisco" } -->

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

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

  (1) 擷取字串的前三個字元：

{{ San Francisco is very cloudy | limitTo:3 }} <!-- San -->

(2) 擷取字串的後的六個字元：

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

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

{{ ['a','b','c','d','e','f'] | limitTo:1 }} <!-- ["a"] -->

6. lowercase lowercase過濾器將字串轉為小寫。

{{ "San Francisco is very cloudy" | lowercase }}

<!-- san francisco is very cloudy -->

7. Number  number過濾器將數字格式化成文字。

它的第二個引數是可選的，用來控制小數點後擷取的位數。

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

{{ 123456789 | number }} <!-- 1,234,567,890 -->  

{{ 1.234567 | number:2 }}  <!-- 1.23 -->

 8. orderBy

orderBy過濾器可以用表示式對指定的陣列進行排序。

  orderBy可以接受兩個引數，第一個是必需的，第二個是可選的。 第一個引數是用來確 定陣列排序方向的謂詞。

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

陣列 在排序表示式中使用陣列元素作為謂詞。對於與表示式結果並不嚴格相等的每 個元素，則使用第一個謂詞。 第二個引數用來控制排序的方向（是否逆向）。 例如，我們將下面的物件陣列用name欄位進行排序：

{{ [ { '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':’capitalize’ }}