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 :

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 %"