AngularJS
カスタムフィルタ

単純なフィルタの例

フィルタは、ユーザーに表示する式の値を書式設定します。ビューテンプレート、コントローラ、またはサービスで使用できます。この例では、フィルタ（ addZ ）を作成してビューで使用します。このフィルターは、文字列の最後に大文字の「Z」を追加します。

example.js

angular.module('main', [])
    .filter('addZ', function() {
            return function(value) {
                return value + "Z";
            }
     })
    .controller('MyController', ['$scope', function($scope) {
        $scope.sample = "hello";
    }])

example.html

ビューの内部では、フィルタは次の構文で適用されます。 { variable | filter} 。この場合、コントローラsampleで定義した変数は、作成したフィルタaddZによってフィルタリングされています。

<div ng-controller="MyController">
   <span>{{sample | addZ}}</span>
</div>

期待されるアウトプット

helloZ

コントローラー、サービス、またはフィルターでフィルターを使用する

あなたは$filterを注入する必要があり$filter ：

angular
  .module('filters', [])
  .filter('percentage', function($filter) {
    return function (input) {
      return $filter('number')(input * 100) + ' %';
    };
  });

パラメータを使用してフィルタを作成する

デフォルトでは、フィルタには単一のパラメータ、つまり適用される変数があります。しかし、より多くのパラメータを関数に渡すことができます：

angular
  .module('app', [])
  .controller('MyController', function($scope) {
    $scope.example = 0.098152;
  })
  .filter('percentage', function($filter) {
    return function (input, decimals) {
      return $filter('number')(input * 100, decimals) + ' %';
    };
  });

さて、 percentageフィルタに精度を与えることができます：

<span ng-controller="MyController">{{ example | percentage: 2 }}</span>
=> "9.81 %"

...他のパラメータはオプションですが、引き続きデフォルトのフィルタを使用できます：

<span ng-controller="MyController">{{ example | percentage }}</span>
=> "9.8152 %"