AngularJS之過濾器用法範例
- 高洛峰原創
- 2016-12-08 10:58:461138瀏覽
本文實例講述了AngularJS過濾器用法。分享給大家供大家參考，具體如下：
在前面幾節裡我們已經接觸過AngularJS的表達式，表達式的作用是向視圖中輸出字面量或$scope物件中的屬性值。在輸出之前我們可以透過過濾器來格式化輸出的資料。
過濾器的使用非常簡單，我們看一下下面的程式碼：
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<title>tutorial05_1</title>
</head>
<body>
<p>{{"HELLO WORLD!"| lowercase}}</p>
<p>{{"hello world!"| uppercase}}</p>
<p>{{3.1415926| number:2}}</p>
<p>{{3011| currency}}</p>
</body>
</html>兩個嵌套的大括號即為AngularJs的表達式，我們透過|字元後跟上過濾器名稱來呼叫該過濾器。 lowercase,uppercase,number,currency為AngularJs內建的過濾器。
lowercase用來把文本中的字母轉換為小寫，uppercase和它相反，number過濾器用來控制數字的格式，currency則把數字轉換成金額格式。
我們看一下在瀏覽器中的效果：
AngularJs提供的內建過濾器功能很有限，下面介紹如何自訂過濾器。
<!DOCTYPE html>
<html ng-app="filterMod">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<title>tutorial05_2</title>
</head>
<body>
<p>{{11314| toRMB}}</p>
<script>
var filterMod = angular.module("filterMod",[]);
filterMod.filter("toRMB",function($log)
{
var toRMB = function(input)
{
var RMBNum = ['零',"壹","贰","叁","肆","伍","陆","柒","捌","玖","拾","佰","仟","万","亿"];
var inputStr = input + "";
var inputArr = new Array();
for(i=0;i<inputStr.length;i++)
{
var temp = parseInt(input % 10);
inputArr.push(temp);
switch(i)
{
case 0:inputArr.push(10);
break;
case 1:inputArr.push(11);
break;
case 2:inputArr.push(12);
break;
case 3:inputArr.push(13);
break;
}
input = input / 10;
}
inputArr = inputArr.reverse();
var output = "";
for(i=0;i<inputArr.length;i++)
{
output += RMBNum[inputArr[i]];
}
return output;
}
return toRMB;
});
</script>
</body>
</html>上面是筆者自訂的將數字轉換成人民幣大寫漢字的過濾器。
filterMod.filter("toRMB",function($log)...
過濾器的定義和控制器類似，我們透過AngularJs模組的filter方法來完成，第一個參數為過濾器的名稱，第二個參數為過濾器實現部分，它必須傳回一個資料處理函數。
var toRMB = function(input)...
這一部分為資料處理函數，input為原始輸入數據，我們在該函數中對輸入資料進行處理，然後return 處理過後的資料即可。
在瀏覽器中效果：
注意：這個toRMB 過濾器只是筆者為了演示自定義過濾器的方法而編寫的，還有很多不足的地方，有興趣的讀者可以自行完善。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn