AngularJs學習筆記__5、內置過濾器

AngularJs內置了一些過濾器,像日期格式化,字符串轉json,大小寫,數字格式化。下面來看它的使用方法。

一個過濾器不帶參數的情況:{{expression | filter}}

一個過濾器帶參數的情況:{{expression | filter:arguments}}

一個過濾器器帶多個參數的情況:{{expression | filter:arg1:arg2:...}}

多個過濾器不帶參數的情況:{{expression | filter1 | filter2 |...}}

下面是使用例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"  src="js/angular.js"></script>
</head>
<body>
	大小寫:
	<input type="text" ng_model="username" placeholder="world"/><br/>
	 小寫lowercase:{{username|lowercase}}<br/>
	  大寫uppercase:{{username|uppercase}}<br/>
	  <hr/>
	 number:
	  <input type="text" ng_model="num"/><br/>
	  保留兩位小數:{{num | number:2}}
	   <hr/>
	   currency:
	   <input type="text" ng_model="currency"/><br>
	   貨比符號:{{currency | currency:$}}
	   <hr/>
	   date:<input type="text" ng_model="today"/><br/>
	   yyyy-mm-dd: {{ today | date: "yyyy-mm-dd"}}<br/>
	  yyyy-mm-dd HH:mm::ss: {{ today | date: "yyyy-mm-dd HH:mm::ss"}}<br/>
	  <hr/>
	  json:
		{{ {"name":"dreamapple","language":"AngularJS"} | json}}
	  
</body>
</html>

發佈了71 篇原創文章 · 獲贊 12 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章