フィルターについて

http://docs.angularjs.org/guide/filter

フィルターは、ユーザーに対して表示する式の値をフィルタリングします。ビューテンプレート、コントローラー、サービスで使用することが出来、オリジナルのフィルターを定義するのは簡単です。基本的なAPIは、filterProviderから提供されます。

ビューテンプレート内でのフィルターの使用
コントローラーとサービス内でのフィルターの使用
カスタムフィルターの作成

ビューテンプレート内でのフィルターの使用

ビューテンプレート内では下記の文法で、式に適用することが可能です。

{{ expression | filter }}

例). {{ 12 | currency }}は、数値である12をcurrencyフィルターを使用して通貨とみなします。これは、$12.00という結果になります。

フィルターの結果に、別のフィルターを適用することも可能です。これは、"チェイン(chaining)"と呼ばれ、下記のような文法で行います。

{{ expression | filter1 | filter2 | ... }}

フィルターは、引数を取ることも出来、文法は下記のようになります。

{{ expression | filter:argument1:argument2:... }}

例). {{ 1234 | number:2 }}のマークアップは、数値である1234をnumberフィルターを使用して、少数第2位までを表示します。これは、1,234.00という結果になります。

コントローラーとサービス内でのフィルターの使用

フィルターは、コントローラーとサービス内で使用することも可能です。これを行うには、<フィルター名>Filterの名前で、自分のコントローラーまたはサービスに依存関係を加えます。
例). numberFilterの依存性を使用すると、numberフィルターが注入されます。引数として注入される関数は、1つ目の引数でフォーマットする値を、 2つ目の引数以降でフィルター用の引数を受け取ります。

下記の例では、filterと呼ばれるフィルターを使用しています。このフィルターは、条件に基づいて配列をフィルタリングし、その結果として項目が絞られた配列を取得します。このフィルターは、ビューテンプレート内で{{ctrl.array | filter:'a'}}のようなマークアップで使用し、この場合は中身が文字列が'a'だけの項目に絞られます。ただし、ビューテンプレート内でのフィルターの使用は、digestの度にフィルターの再評価が行われるため、大きい配列の場合の負荷が大きくなってしまうので注意が必要です。

そのため、下記の例ではこのフィルターをコントローラー内で直接呼び出しています。こうすることで、必要な場合にのみコントローラーがフィルターを呼び出すようにしています。 (例えば、バックエンドからデータを読み込んだ場合、フィルター式の内容が変更された場合)

index.html
script.js

<!doctype html>
<html ng-app="FilterInControllerModule">
  <head>
    <script src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="FilterController as ctrl">
      <div>
        All entries:
        <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
      </div>
      <div>
        Entries that contain an "a":
        <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
      </div>
    </div>
  </body>
</html>

angular.module('FilterInControllerModule', []).
  controller('FilterController', ['filterFilter', function(filterFilter) {
    this.array = [
      {name: 'Tobias'},
      {name: 'Jeff'},
      {name: 'Brian'},
      {name: 'Igor'},
      {name: 'James'},
      {name: 'Brad'}
    ];
    this.filteredArray = filterFilter(this.array, 'a');
  }]);

<!doctype html>
<html ng-app="FilterInControllerModule">
  <head>
    <script src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
<script>angular.module('FilterInControllerModule', []).
  controller('FilterController', ['filterFilter', function(filterFilter) {
    this.array = [
      {name: 'Tobias'},
      {name: 'Jeff'},
      {name: 'Brian'},
      {name: 'Igor'},
      {name: 'James'},
      {name: 'Brad'}
    ];
    this.filteredArray = filterFilter(this.array, 'a');
  }]);
</script>
  </head>
  <body>
    <div ng-controller="FilterController as ctrl">
      <div>
        All entries:
        <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
      </div>
      <div>
        Entries that contain an "a":
        <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
      </div>
    </div>
  </body>
</html>

カスタムフィルターの作成

自分のフィルターを作るのはとても簡単で、モジュールに新しいフィルターのファクトリー関数を登録するだけです。内部で、filterProviderが使用されることになります。このファクトリー巻数は、入力値を1つ目の引数として受け取る新しいフィルター関数を返すべきです。後に続く引数が、そのままフィルターへの引数としてフィルター関数に渡されます。

下記の例のフィルターは、テキストの文字列は逆さまにします。また条件を満たすと、テキストを大文字に変換します。

index.html
script.js

<!doctype html>
<html ng-app="MyReverseModule">
  <head>
    <script src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <input ng-model="greeting" type="greeting"><br>
      No filter: {{greeting}}<br>
      Reverse: {{greeting|reverse}}<br>
      Reverse + uppercase: {{greeting|reverse:true}}<br>
    </div>
  </body>
</html>

angular.module('MyReverseModule', []).
  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;
    }
  });

function Ctrl($scope) {
  $scope.greeting = 'hello';
}

<!doctype html>
<html ng-app="MyReverseModule">
  <head>
    <script src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
<script>angular.module('MyReverseModule', []).
  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;
    }
  });

function Ctrl($scope) {
  $scope.greeting = 'hello';
}
</script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <input ng-model="greeting" type="greeting"><br>
      No filter: {{greeting}}<br>
      Reverse: {{greeting|reverse}}<br>
      Reverse + uppercase: {{greeting|reverse:true}}<br>
    </div>
  </body>
</html>

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。