Suche…


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


Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow