AngularJS
Aangepaste filters

Eenvoudig filtervoorbeeld

Filters formatteren de waarde van een uitdrukking voor weergave aan de gebruiker. Ze kunnen worden gebruikt in weergavesjablonen, controllers of services. In dit voorbeeld wordt een filter ( addZ ) gemaakt en vervolgens in een weergave gebruikt. Het enige dat dit filter doet, is het toevoegen van een hoofdletter 'Z' aan het einde van de string.

example.js

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

example.html

In de weergave wordt het filter toegepast met de volgende syntaxis: { variable | filter} . In dit geval wordt de variabele die we hebben gedefinieerd in de controller, sample , gefilterd door het filter dat we hebben gemaakt, addZ .

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

Verwachte resultaten

helloZ

Gebruik een filter in een controller, een service of een filter

U moet $filter injecteren:

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

Maak een filter met parameters

Standaard heeft een filter een enkele parameter: de variabele waarop het wordt toegepast. Maar u kunt meer parameters doorgeven aan de functie:

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

Nu kunt u een precisie geven aan het percentage :

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

... maar andere parameters zijn optioneel, u kunt nog steeds het standaardfilter gebruiken:

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