AngularJS入門教程之過濾器用法示例
本文實(shí)例講述了AngularJS過濾器用法。分享給大家供大家參考，具體如下：
在前面幾節(jié)里我們已經(jīng)接觸過AngularJS的表達(dá)式，表達(dá)式的作用是向視圖中輸出字面量或$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的表達(dá)式，我們通過|字符后跟上過濾器名稱來調(diào)用該過濾器。lowercase,uppercase,number,currency為AngularJs內(nèi)置的過濾器。
lowercase用來把文本中的字母轉(zhuǎn)換為小寫，uppercase和它相反，number過濾器用來控制數(shù)字的格式，currency則把數(shù)字轉(zhuǎn)換成金額格式。
我們看一下在瀏覽器中的效果：
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ù)字轉(zhuǎn)換成人民幣大寫漢字的過濾器。
filterMod.filter("toRMB",function($log)...
過濾器的定義和控制器類似，我們通過AngularJs模塊的filter方法來完成，第一個參數(shù)為過濾器的名稱，第二個參數(shù)為過濾器實(shí)現(xiàn)部分，它必須返回一個數(shù)據(jù)處理函數(shù)。
var toRMB = function(input)...
這一部分為數(shù)據(jù)處理函數(shù)，input為原始輸入數(shù)據(jù)，我們在該函數(shù)中對輸入數(shù)據(jù)進(jìn)行處理，然后return 處理過后的數(shù)據(jù)即可。
在瀏覽器中效果：
注意：這個toRMB 過濾器只是筆者為了演示自定義過濾器的方法而編寫的，還有很多不足的地方，有興趣的讀者可以自行完善。
AngularJS源碼可點(diǎn)擊此處本站下載。
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
- AngularJS入門教程之Helloworld示例
- AngularJS入門教程之Hello World!
- AngularJS入門教程之路由機(jī)制ngRoute實(shí)例分析
- AngularJS入門教程之?dāng)?shù)據(jù)綁定原理詳解
- AngularJS入門教程之與服務(wù)器(Ajax)交互操作示例【附完整demo源碼下載】
- AngularJS入門教程之Cookies讀寫操作示例
- AngularJS入門教程之多視圖切換用法示例
- AngularJS入門教程之模塊化操作用法示例
- AngularJS入門教程之MVC架構(gòu)實(shí)例分析
- AngularJs入門教程之環(huán)境搭建+創(chuàng)建應(yīng)用示例
- AngularJS入門教程之REST和定制服務(wù)詳解
- AngularJS入門示例之Hello World詳解
相關(guān)文章
Angular outlet實(shí)現(xiàn)頁面布局示例詳解
這篇文章主要為大家介紹了Angular outlet實(shí)現(xiàn)頁面布局示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向傳值詳解
這篇文章主要給大家介紹了關(guān)于Angular 4.x+Ionic3踩坑之Ionic3.x pop反向傳值的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-03-03
使用Angular 6創(chuàng)建各種動畫效果的方法
Angular能夠讓我們創(chuàng)建出具有原生表現(xiàn)效果的動畫。我們將通過本文學(xué)習(xí)到如何使用Angular 6來創(chuàng)建各種動畫效果。在此，我們將使用Visual Studio Code來進(jìn)行示例演示。感興趣的朋友跟隨小編一起看看吧2018-10-10
最近這兩天公司正在做一個PDF協(xié)議下載的功能，目前的解決方案可以分為完全前端生成和后端生成兩種方式。前端生成PDF有jsPDF 和pdfmake 兩種方式，下面這篇文章就給大家分享下如何在Angular.JS中接收并下載PDF的方法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-11-11
這篇文章主要給大家介紹了關(guān)于如何以Angular的姿勢打開Font-Awesome的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Angular具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
AngularJS 中的Promise --- $q服務(wù)詳解
這篇文章主要介紹了AngularJS 中的Promise --- $q服務(wù)詳解方法的相關(guān)資料,需要的朋友可以參考下2016-09-09
angular 實(shí)現(xiàn)下拉列表組件的示例代碼
這篇文章主要介紹了angular 實(shí)現(xiàn)下拉列表組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
通過angular CDK實(shí)現(xiàn)頁面元素拖放的步驟詳解
這篇文章主要給大家介紹了關(guān)于如何通過angular CDK實(shí)現(xiàn)頁面元素拖放的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用angular具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
AngularJS實(shí)現(xiàn)動態(tài)切換樣式的方法分析
這篇文章主要介紹了AngularJS實(shí)現(xiàn)動態(tài)切換樣式的方法,結(jié)合實(shí)例形式分析了AngularJS事件響應(yīng)與樣式動態(tài)控制相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
Angular組件庫ng-zorro-antd實(shí)現(xiàn)radio單選框選擇
這篇文章主要為大家介紹了Angular組件庫ng-zorro-antd實(shí)現(xiàn)radio單選框取消選擇實(shí)現(xiàn)問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05