AngularJS
Filtri personalizzati

Esempio di filtro semplice

I filtri formattano il valore di un'espressione per la visualizzazione all'utente. Possono essere utilizzati in modelli di visualizzazione, controller o servizi. Questo esempio crea un filtro ( addZ ) quindi lo utilizza in una vista. Tutto questo filtro fa aggiungere una "Z" maiuscola alla fine della stringa.

example.js

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

example.html

All'interno della vista, il filtro viene applicato con la seguente sintassi: { variable | filter} . In questo caso, la variabile che abbiamo definito nel controller, sample , viene filtrata dal filtro che abbiamo creato, addZ .

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

Uscita prevista

helloZ

Utilizzare un filtro in un controller, un servizio o un filtro

Dovrai iniettare $filter :

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

Crea un filtro con parametri

Per impostazione predefinita, un filtro ha un singolo parametro: la variabile su cui è applicato. Ma puoi passare più parametri alla funzione:

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

Ora puoi dare una precisione al filtro percentage :

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

... ma altri parametri sono opzionali, puoi comunque utilizzare il filtro predefinito:

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