AngularJS
Benutzerdefinierte Filter

Einfaches Filterbeispiel

Filter formatieren den Wert eines Ausdrucks zur Anzeige für den Benutzer. Sie können in Ansichtsvorlagen, Controllern oder Services verwendet werden. In diesem Beispiel wird ein Filter ( addZ ) erstellt und dann in einer Ansicht verwendet. Dieser Filter fügt am Ende der Zeichenfolge ein "Z" hinzu.

beispiel.js

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

example.html

In der Ansicht wird der Filter mit der folgenden Syntax angewendet: { variable | filter} . In diesem Fall wird die von uns im Controller definierte Variable sample durch den von uns erstellten Filter addZ .

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

Erwartete Ausgabe

helloZ

Verwenden Sie einen Filter in einer Steuerung, einem Dienst oder einem Filter

Sie müssen $filter injizieren:

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

Erstellen Sie einen Filter mit Parametern

Standardmäßig hat ein Filter einen einzigen Parameter: die Variable, auf die er angewendet wird. Sie können jedoch weitere Parameter an die Funktion übergeben:

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

Jetzt können Sie eine Genauigkeit auf den geben percentage

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

... aber andere Parameter sind optional, Sie können jedoch den Standardfilter verwenden:

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