AngularJS入門教程之過濾器用法示例
本文實例講述了AngularJS過濾器用法。分享給大家供大家參考,具體如下:
在前面幾節(jié)里我們已經(jīng)接觸過AngularJS的表達式,表達式的作用是向視圖中輸出字面量或$scope對象中的屬性值。在輸出之前我們可以通過過濾器來格式化輸出的數(shù)據(jù)。
過濾器的使用非常簡單,我們看一下下面的代碼:
<!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的表達式,我們通過|字符后跟上過濾器名稱來調(diào)用該過濾器。lowercase,uppercase,number,currency為AngularJs內(nèi)置的過濾器。
lowercase用來把文本中的字母轉換為小寫,uppercase和它相反,number過濾器用來控制數(shù)字的格式,currency則把數(shù)字轉換成金額格式。
我們看一下在瀏覽器中的效果:
AngularJs提供的內(nèi)置過濾器功能很有限,下面介紹如何自定義過濾器。
<!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>
上面是筆者自定義的一個將數(shù)字轉換成人民幣大寫漢字的過濾器。
filterMod.filter("toRMB",function($log)...
過濾器的定義和控制器類似,我們通過AngularJs模塊的filter方法來完成,第一個參數(shù)為過濾器的名稱,第二個參數(shù)為過濾器實現(xiàn)部分,它必須返回一個數(shù)據(jù)處理函數(shù)。
var toRMB = function(input)...
這一部分為數(shù)據(jù)處理函數(shù),input為原始輸入數(shù)據(jù),我們在該函數(shù)中對輸入數(shù)據(jù)進行處理,然后return 處理過后的數(shù)據(jù)即可。
在瀏覽器中效果:
注意:這個toRMB 過濾器只是筆者為了演示自定義過濾器的方法而編寫的,還有很多不足的地方,有興趣的讀者可以自行完善。
AngularJS源碼可點擊此處本站下載。
希望本文所述對大家AngularJS程序設計有所幫助。
- AngularJS入門教程之Helloworld示例
- AngularJS入門教程之Hello World!
- AngularJS入門教程之路由機制ngRoute實例分析
- AngularJS入門教程之數(shù)據(jù)綁定原理詳解
- AngularJS入門教程之與服務器(Ajax)交互操作示例【附完整demo源碼下載】
- AngularJS入門教程之Cookies讀寫操作示例
- AngularJS入門教程之多視圖切換用法示例
- AngularJS入門教程之模塊化操作用法示例
- AngularJS入門教程之MVC架構實例分析
- AngularJs入門教程之環(huán)境搭建+創(chuàng)建應用示例
- AngularJS入門教程之REST和定制服務詳解
- AngularJS入門示例之Hello World詳解
相關文章
AngularJS出現(xiàn)$http異步后臺無法獲取請求參數(shù)問題的解決方法
這篇文章主要介紹了AngularJS出現(xiàn)$http異步后臺無法獲取請求參數(shù)問題的解決方法,較為詳細的分析了AngularJS出現(xiàn)異步請求后臺無法解析的原因與相應的解決方法,需要的朋友可以參考下2016-11-11Angularjs 雙向綁定時字符串的轉換成數(shù)字類型的問題
這篇文章主要介紹了Angular js雙向綁定時字符串的轉換成數(shù)字類型的問題,需要的朋友可以參考下2017-06-06AngularJS實現(xiàn)根據(jù)不同條件顯示不同控件
本篇文章主要介紹了AngularJS實現(xiàn)根據(jù)不同條件顯示不同控件的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04angularjs學習筆記之三大模塊(modal,controller,view)
本文給大家記錄的是angularjs的三大模塊(modal,controller,view)的使用說明,方便初學者能夠順利的學習angularjs.2015-09-09