我們在 AngularJS 入門教學 - ngRepeat (一) 中有使用到過濾器(Filters)的基本用法。但其實除了過濾之外，還有些內容轉換到的功能。所以現在讓筆者來將內建的過濾器(Filters)一一介紹給各位看看囉！
先準備好基本的 HTML 區塊就好：
1 2 3 | <div class="span6" ng-controller="FilterCtrl"> </div> |
然後，在新增 js/controller.js，並建立一個 FilterCtrl：
1 2 3 | var FilterCtrl = function($scope){ }; |
在開始看之前，先來複習一下過濾器(Filters)的使用方式：
1 | model | Filters |
只要在 model 或是變數後面加上一條直線 |，接著再繼續接上要使用的過濾器(Filters)就可以了。
若都準備好之後，讓我們開始來一一介紹給各位看囉！
number
可以將字串轉成數字，並將數字格式化為三位一撇，同時也能限制小數以下的位數。預設是小數以下 3 位。
首先先在 FilterCtrl 中加入一個新的 model：
1 | $scope.num = 1234.56789; |
然後加上 HTML：
1 2 3 4 | <div class="alert alert-info"> <input type="number" ng-model="num"> <pre >{{ num | number }}</pre > </div> |
預覽後應該就會看到 1,234.568 的內容，你也可以自己輸入試試看：
若是要自行指定小數以下位數的話呢？
1 | <pre >{{ num | number:5 }}</pre > |
那這是在 HTML 中進行轉換的，如果想要在 Controller 中先轉換再使用的話，就得要在建立 Controller 時，除了傳入 $scope 之外，得再多傳入 $filter 才行。
所以，以這個例子來看的話，在 Controller 中就可以寫成這樣：
1 2 3 4 | var FilterCtrl = function($scope, $filter){ $scope.num = 1234.56789123456; console.log($filter('number')($scope.num, 5)); }; |
要特別注意那個 $filter 要當成參數傳入喔！
currency
除了進行跟 number 一樣的轉換之外，還會在輸出結果前加入當地的貨幣符號。預設是 $，但若有引用 i18n 檔案的話，會依裡面的設定為主。
一樣在 FilterCtrl 中加入一個新的 model：
1 | $scope.money = 1234.567; |
然後加上 HTML：
1 2 3 4 | <div class="alert alert-info"> <input type="number" ng-model="money"> <pre >{{ money | currency }}</pre > </div> |
這邊可以很清楚的看到數字前面加上了 $ 的符號，這是因為若沒有特別去載入 i18n 檔案的話，就會用 $ 當預設值：
當筆者多引用了 angular-locale_zh-tw.js 後，就會變成 NT$ 了：
如果想要自訂貨幣的前綴名稱的話，只要多傳入個參數：
1 | <pre >{{ money | currency:'NTD ' }}</pre > |
date
可以將 Date 物件、符合 ISO 8601 的日期格式字串(完整格式為：yyyy-MM-ddTHH:mm:ss.SSSZ)或是數字轉成指定格式的日期字串。
一樣在 FilterCtrl 中加入一個新的 model：
1 | $scope.birth = '2013-08-26'; |
然後加上 HTML：
1 2 3 4 | <div class="alert alert-info"> <input type="date" ng-model="birth"> <pre >{{ birth | date }}</pre > </div> |
預設的格式是 "MMM d, y"：
除了引用 i18n 檔案之外，我們也能自訂日期格式：
1 | <pre >{{ birth | date:'yyyy 年 MM 月 dd 日' }}</pre > |
同時也有內建了幾個預設的格式參數，詳細的格式內容請參閱：http://docs.angularjs.org/api/ng.filter:date
json
可以將 JavaScript 物件轉成標準的 JSON 格式字串。
一樣在 FilterCtrl 中加入一個新的 model：
1 2 3 4 5 | $scope.obj = { name: 'abgne.tw', age: 18, skills: [ 'jQuery', 'JavaScript'] }; |
然後加上 HTML：
1 2 3 | <div class="alert alert-info"> <pre >{{ obj | json }}</pre > </div> |
不過若是使用 Angular 表達式(Angular Expressions)來輸出物件的話，其實是會自動套用 json 過濾器。
lowercase
可以將大寫英文字轉成小寫格式。
一樣在 FilterCtrl 中加入一個新的 model：
1 | $scope.lower = 'ABGNE.TW'; |
然後加上 HTML：
1 2 3 4 | <div class="alert alert-info"> <input type="text" ng-model="lower"> <pre >{{ lower | lowercase }}</pre > </div> |
不管輸入怎樣的大寫英文字，都會一一被轉換成小寫英文字：
uppercase
可以將小寫英文字轉成大寫格式。
一樣在 FilterCtrl 中加入一個新的 model：
1 | $scope.upper = 'abgne.tw'; |
然後加上 HTML：
1 2 3 4 | <div class="alert alert-info"> <input type="text" ng-model="upper"> <pre >{{ upper | uppercase }}</pre > </div> |
不管輸入怎樣的小寫英文字，都會一一被轉換成大寫英文字：
接下來還有 filter、limitTo 及 orderBy 等過濾器，這三個就留到下面兩篇篇中介紹說明(作業也是最後再一起做)。