快捷導(dǎo)航

AngularJS入門教程之過濾器用法示例

更新時(shí)間：2016年11月02日 09:18:24 作者：Rongbo_J

這篇文章主要介紹了AngularJS過濾器用法,結(jié)合實(shí)例形式簡單的分析了AngularJS過濾器的功能及基本用法,并舉例說明了自定義過濾器的實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(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>

兩個(gè)嵌套的大括號即為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>

上面是筆者自定義的一個(gè)將數(shù)字轉(zhuǎn)換成人民幣大寫漢字的過濾器。

filterMod.filter("toRMB",function($log)...

過濾器的定義和控制器類似，我們通過AngularJs模塊的filter方法來完成，第一個(gè)參數(shù)為過濾器的名稱，第二個(gè)參數(shù)為過濾器實(shí)現(xiàn)部分，它必須返回一個(gè)數(shù)據(jù)處理函數(shù)。

var toRMB = function(input)...

這一部分為數(shù)據(jù)處理函數(shù)，input為原始輸入數(shù)據(jù)，我們在該函數(shù)中對輸入數(shù)據(jù)進(jìn)行處理，然后return 處理過后的數(shù)據(jù)即可。

在瀏覽器中效果：

注意：這個(gè)toRMB 過濾器只是筆者為了演示自定義過濾器的方法而編寫的，還有很多不足的地方，有興趣的讀者可以自行完善。

AngularJS源碼可點(diǎn)擊此處本站下載。

希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

AngularJS入門教程之過濾器用法示例

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具