本文執行個體講述了AngularJS過濾器用法。分享給大家供大家參考，具體如下：
在前面幾節裡我們已經接觸過AngularJS的運算式，運算式的作用是向視圖中輸出字面量或$scope對象中的屬性值。在輸出之前我們可以通過過濾器來格式化輸出的資料。
過濾器的使用非常簡單，我們看一下下面的代碼：
<!DOCTYPE html><html ng-app><head lang="en"> <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 lang="en"> <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 過濾器只是筆者為了示範自訂過濾器的方法而編寫的，還有很多不足的地方，有興趣的讀者可以自行完善。
AngularJS源碼可點擊此處本站下載。
希望本文所述對大家AngularJS程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
