過濾器
在AngularJS中使用過濾器格式化展示數據 ,作用就是接收一個輸入,通過某個規則進行處理.然后返回處理結果.
1.angular內置了9個過濾器:
- 1.
currency:將數值格式化為貨幣格式 - 2.
data:日期格式化 , 年(y), 月(M), 日(d), 星期(EEEE/EEE), 時(H/h), 分(m), 秒(s), 毫秒(.sss), 也可以組合到一起使用 - 3.
filter: 在給定數組中選擇滿足條件的一個子集,并返回一個新的數組,其條件可以是一個字符串,對象,函數. - 4.
json: 將Javascript 對象轉換成JSON字符串. - 5.
limitTo: 取出字符串或數組前(正數)幾位,或后(負數)幾位 - 6.
lowercase:將文本轉換成小寫格式 - 7.
uppercase:將文本轉換成大寫格式 - 8.
number: 數字格式化, 可控制小數位數 - 9.
orderBy: 對數組進行排序, 第2個參數可控制方向
2.管道符
- 管道符: 把上次結果,作為下次參數傳遞 |
- 注意:過濾器本質就是一個方法 /函數/ function,
- 過濾器會自動把 | 前面的內容,當作方法第一個參數傳入
<p>{{price | currency:'￥'}}</p>
偽代碼:
function currency(input, arg){
return arg + input;
}
- 注意2:如果想要自己手動傳參 ,使用冒號 : 傳遞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--
angular 內容
1.內置指令
2.自定義指令
3.過濾器 ->對數據進行格式化處理 ￥12 new Date -> yyyy-MM-dd
4.服務
5.路由
管道符:把上次結果,作為下次參數傳遞 |
注意:過濾器本質就是一個方法 /函數/ function, 過濾器會自動把 | 前面的內容,當作方法第一個參數傳入
偽代碼:
function currency(input, arg){
return arg + input;
}
注意2:如果想要自己手動傳參 ,使用冒號 : 傳遞
-->
<body ng-app="app" ng-controller="xmgController">
<p>{{price | currency:'￥'}}</p>
<p>{{curDate | date:'yyyy-MM-dd hh:mm:ss'}}</p>
<p>{{str | uppercase | lowercase}}</p>
<p>{{num| number:2}}</p><!--參數：保留幾位小數-->
<p>{{course | limitTo: -1}}</p><!--參數為負 代表倒著截取-->
</body>
<script src="js/angular.js"></script>
<script>
//1.創建模塊
var app = angular.module('app', []);
//2.創建控制器
app.controller('xmgController', ['$scope', function ($scope) {
$scope.price = 12.0;
$scope.curDate = new Date();
$scope.str = 'xmgSK666';
$scope.num = 3.1415926;
$scope.course = ['html', 'css', 'js'];
}]);
//3.綁定模塊 ng-app="app"
//4.綁定控制器 ng-controller="xmgController"
</script>
</html>
