AngularJSのカスタムフィルタの詳細と例コード

　　　　 AngularJSの別の特徴はフィルタの提供で、UNIXのパイプラインの方法でデータ結果を操作できます。

　　パイプラインを使用することで、ビューの表示を便利に双向のデータバインディングで行うことができます。

　　フィルタはデータを新しい形式に変換し、パイプラインのリンクリッシュスタイルを使用し、追加のパラメータを受け入れることができます。

　　実現方法

　　フィルタを定義し、宣言する方法を見てみましょう。まずは自分自身のモジュールmyAppModuleを作成します。

　　　　　　　　　　　　　　　　　　 var myAppModule=angular.module("myApp",[]);

　　次に、モジュールの上でフィルタを作成します：

myAppModule.filter("reverse",function(){
　　　　　　　　　　　
});

　　その中でreverseはフィルタの名前で、フィルタのメソッド宣言が続きます。メソッドの中で別のメソッドを返します：

myAppModule.filter("reverse",function(){
        return function(input,uppercase){
          var out = "";
          for(var i=0 ; i<input.length; i++{
            out = input.charAt(i)+out;
          }
          if(uppercase){
            out = out.toUpperCase();
          }
          return out;
        }
      });

　　内部で戻るメソッドは、入力の値と、私たちのフィルタが受け取る値の2つのパラメータを含んでいます。

　　以下のフィルタを実現したい場合は：

　　name | reverse

　　それではinputはnameが表す値です。

　　次のパラメータはオプションです。ここではuppercaseこのbool値を受け入れ、大文字化するかどうかを判定します。

　　内部での実装のコードは説明する必要はありません。最後にフィルタリングされた文字列を返却してください。

　　プログラムサンプル

!doctype html
<html ng-app="myApp">
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="myAppCtrl">
      name:{{ name }}<br>
      reverse name:{{ name | reverse }}<br>
      reverse&uppercase name:{{ name | reverse:true }}
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module("myApp",[]);
      myAppModule.controller("myAppCtrl",["$scope",function($scope){
        $scope.name = "xingoo";
      }]);
      myAppModule.filter("reverse",function(){
        return function(input,uppercase){
          var out = "";
          for(var i=0 ; i<input.length; i++{
            out = input.charAt(i)+out;
          }
          if(uppercase){
            out = out.toUpperCase();
          }
          return out;
        }
      });
    </script>
  </body>
</html>

　　実行結果

AngularJSのカスタムフィルタの情報をまとめました。今後も関連する情報を追加していきます。皆様のこのサイトへのサポートに感謝します。

声明：この記事の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、このサイトは所有権を有しないです。また、人工的な編集は行われていません。著作権侵害を疑う内容が見つかりましたら、notice#wまでメールを送ってください。3codebox.com（メールを送信する際は、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認が取れましたら、このサイトは即座に侵害を疑われるコンテンツを削除します。)

基礎教程