快捷導(dǎo)航

AngularJS入門教程之過(guò)濾器用法示例

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

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

本文實(shí)例講述了AngularJS過(guò)濾器用法。分享給大家供大家參考，具體如下：

在前面幾節(jié)里我們已經(jīng)接觸過(guò)AngularJS的表達(dá)式，表達(dá)式的作用是向視圖中輸出字面量或$scope對(duì)象中的屬性值。在輸出之前我們可以通過(guò)過(guò)濾器來(lái)格式化輸出的數(shù)據(jù)。

過(guò)濾器的使用非常簡(jiǎn)單，我們看一下下面的代碼：

<!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è)嵌套的大括號(hào)即為AngularJs的表達(dá)式，我們通過(guò)|字符后跟上過(guò)濾器名稱來(lái)調(diào)用該過(guò)濾器。lowercase,uppercase,number,currency為AngularJs內(nèi)置的過(guò)濾器。

lowercase用來(lái)把文本中的字母轉(zhuǎn)換為小寫，uppercase和它相反，number過(guò)濾器用來(lái)控制數(shù)字的格式，currency則把數(shù)字轉(zhuǎn)換成金額格式。

我們看一下在瀏覽器中的效果：

AngularJs提供的內(nèi)置過(guò)濾器功能很有限，下面介紹如何自定義過(guò)濾器。

<!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 = ['零',"壹","貳","叁","肆","伍","陸","柒","捌","玖","拾","佰","仟","萬(wàn)","億"];
   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)換成人民幣大寫漢字的過(guò)濾器。

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

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