AngularJSフィルターの使用例-PHP开发-php.cn

AngularJSフィルターの使用例

高洛峰

リリース： 2016-12-08 10:58:46

オリジナル

1166 人が閲覧しました

この記事の例では、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>

ログイン後にコピー

2 つのネストされた中括弧は、フィルター名に続く | 文字を使用してフィルターを呼び出します。小文字、大文字、数値、通貨は AngularJs の組み込みフィルターです。

小文字はテキスト内の文字を小文字に変換するために使用され、大文字はその逆で、数値フィルターは数値の形式を制御するために使用され、通貨は数値を金額形式に変換します。

ブラウザでの効果を見てみましょう:

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 メソッドを通じて完了します。最初のパラメーターはフィルターの名前であり、2 番目のパラメーターはフィルターの実装部分です。データ処理関数を返す必要があります。

var toRMB = function(input)...

ログイン後にコピー

この部分はデータ処理関数です。input は元の入力データです。この関数で入力データを処理し、処理されたデータを返します。

ブラウザでの効果:

AngularJSフィルターの使用例

注: この toRMB フィルターは、フィルターのカスタマイズ方法を説明するために作成者によってのみ作成されています。興味のある読者は、まだ多くの欠陥を自分で改善できます。