AngularJS
Filtros personalizados

Ejemplo de filtro simple

Los filtros formatean el valor de una expresión para mostrarla al usuario. Se pueden utilizar en plantillas de vista, controladores o servicios. Este ejemplo crea un filtro ( addZ ) y luego lo usa en una vista. Todo lo que hace este filtro es agregar una 'Z' mayúscula al final de la cadena.

example.js

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

example.html

Dentro de la vista, el filtro se aplica con la siguiente sintaxis: { variable | filter} . En este caso, la variable que definimos en el controlador, sample , se filtra por el filtro que creamos, addZ .

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

Rendimiento esperado

helloZ

Utilice un filtro en un controlador, un servicio o un filtro

Tendrá que inyectar $filter :

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

Crear un filtro con parámetros.

Por defecto, un filtro tiene un solo parámetro: la variable sobre la que se aplica. Pero puedes pasar más parámetros a la función:

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) + ' %';
    };
  });

Ahora, puede dar una precisión al filtro de percentage :

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

... pero otros parámetros son opcionales, aún puede usar el filtro predeterminado:

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