angular學習筆記(十六) -- 過濾器(1)

詩&遠方發表於2014-05-21
Angular筆記過濾器

本篇主要介紹過濾器的基本用法:

過濾器用來對資料進行格式的轉換,資料格式的轉化與邏輯無關,因此,我們使用過濾器來進行這些操作:

{{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

 

 




相關文章