AngularJS之過濾器用法範例-PHP开发-PHP中文網

首頁

php教程

PHP开发

AngularJS之過濾器用法範例

高洛峰

Dec 08, 2016 am 10:58 AM

angularjs

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

在前面幾節裡我們已經接觸過AngularJS的表達式，表達式的作用是向視圖中輸出字面量或$scope物件中的屬性值。在輸出之前我們可以透過過濾器來格式化輸出的資料。

過濾器的使用非常簡單，我們看一下下面的程式碼：

<!DOCTYPE html>
<html ng-app>
<head>
 <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之過濾器用法範例

AngularJs提供的內建過濾器功能很有限，下面介紹如何自訂過濾器。

<!DOCTYPE html>
<html ng-app="filterMod">
<head>
 <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 = [&#39;零&#39;,"壹","贰","叁","肆","伍","陆","柒","捌","玖","拾","佰","仟","万","亿"];
   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 處理過後的資料即可。

在瀏覽器中效果：

AngularJS之過濾器用法範例

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

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中