本篇主要介紹過濾器的基本用法:
過濾器用來對數據進行格式的轉換,數據格式的轉化與邏輯無關,因此,我們使用過濾器來進行這些操作:
{{expression | filter1:,參數1,參數2... | filter2: 參數1,參數2... }}
expression : 表達式,也就是還沒有經過過濾的變量值,相當於普通的 {{}}里面的內容
filter1 : 過濾器的名字,可以是angular內置的過濾器,也可以自定義過濾器(在下一篇里講解)
參數1,參數2,... : 需要被傳遞給過濾器函數的參數,可以有多個
過濾器可以通過 "|" 進行多次過濾
下面來看一些angular內置的過濾器的基本用法:
<!DOCTYPE html> <html ng-app> <head> <title>13.1過濾器</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="filter"> <span>{{num | number:2 }}</span> <br> <span>{{num | number:0 }}</span> <br> <span>{{num | number:0 | currency }}</span> <br> <span>{{num | currency }}</span> <br> <span>{{day | date }}</span> <br> <span>{{word | uppercase}}</span> </div> </body> </html>
function filter($scope){ $scope.word = 'code_bunny'; $scope.day = 1302375948026; $scope.num = 12.956; }
1.{{num | currency }}
currency: 把數字過濾成美元,四舍五入格式化成小數點后兩位.
2. {{num | number:0 }}
number: 格式化數字,后面的參數表示格式化時保留小數點后面的個數,0就是不保留小數,1就是取一位,四舍五入
3. {{num | number:0 | currency }}
number | currency : 先格式化數字,再格式化成美元
4. {{word | uppercase}}
uppercase : 將單詞的小寫轉為大寫
這里只是舉例,還有很多內置的angular過濾器.詳細可以看手冊
--------------------------------------------------------------------------------------------------------
遺留問題:
1.currency過濾器如果不要格式化到小數點后面2位的話,不知道怎么處理,現在即使給一個沒有小數的整數,比如12,它也會格式化為$12.00