過濾器用來格式化需要展示給用戶的數據。AngularJS有很多實用的內置過濾器,同時也提
供了方便的途徑可以自己創建過濾器。
在HTML中的模板綁定符號{{ }}內通過|符號來調用過濾器。例如:{{value|lowercase}}//將值轉換成小寫
在JavaScript代碼中可以通過$filter來調用過濾器
例:
app.controller(‘DemoController‘, [‘$scope‘, ‘$filter‘, function($scope, $filter) { $scope.name = $filter(‘lowercase‘)(‘Ruby‘); }]);以HTML的形式使用過濾器時,如果需要傳遞參數給過濾器,只要在過濾器名字后面加冒號
即可。如果有多個參數,可以在每個參數后面都加入冒號。
例如
{{0.23145|number:3}}
顯示值:0.231//數值過濾器 可以限制小數點后的位數(在過濾器后寫上2,將2作為參數傳遞給過濾器)
可以用|符號作為分割符來同時使用多個過濾器
一:下面介紹AngularJS提供的內置過濾器:
1.currecy過濾器可以將一個數值格式化為貨幣格式。用{{ 50| currency }}來將50轉化成貨幣格式。
currecy過濾器允許我們自己設置貨幣符號。默認情況下會采用客戶端所處區域的貨幣符號,
但是也可以自定義貨幣符號。
2.date過濾器可以將日期格式化成需要的格式。AngularJS中內置了幾種日期格式,如果沒有
指定使用任何格式,默認會采用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 -->
年份格式化
四位年份:{{ today | date:‘yyyy‘ }} <!-- 2013 -->
兩位年份:{{ today | date:‘yy‘ }} <!-- 13 -->
一位年份:{{ today | date:‘y‘ }} <!-- 2013 -->
月份格式化
英文月份:{{ today | date:‘MMMM‘ }} <!-- August -->
英文月份簡寫:{{ today | date:‘MMM‘ }} <!-- Aug -->
數字月份:{{ today |date:‘MM‘ }} <!-- 08 -->
一年中的第幾個月份:{{ today |date:‘M‘ }} <!-- 8 -->
日期格式化
數字日期:{{ today|date:‘dd‘ }} <!-- 09 -->
一個月中的第幾天:{{ today | date:‘d‘ }} <!-- 9 -->
英文星期:{{ today | date:‘EEEE‘ }} <!-- Thursday -->
英文星期簡寫:{{ today | date:‘EEE‘ }} <!-- Thu -->
新聞熱點
疑難解答
圖片精選