AngularJS -Filter

Filter können Ausdrücken und Direktiven mithilfe eines Pipe-Zeichens (|) hinzugefügt werden.

AngularJS-Filter

AngularJS-Filter können zum Transformieren von Daten verwendet werden:

Filter Beschreibung
currency Formatiert eine Zahl in ein Währungsformat.
filter Wählt eine Teilmenge aus Array-Elementen aus.
lowercase Formatiert eine Zeichenfolge in Kleinbuchstaben.
orderBy Sortiert ein Array gemäß einem Ausdruck.
uppercase Formatiert eine Zeichenfolge in Großbuchstaben.

Einen Filter zu Ausdrücken hinzufügen

Filter können Ausdrücken mithilfe eines Pipe-Zeichens (|) und eines Filters hinzugefügt werden.

(In den folgenden zwei Beispielen verwenden wir den im vorherigen Kapitel erwähnten Person-Controller)

uppercaseDer Filter formatiert eine Zeichenfolge in Großbuchstaben:

AngularJS-Beispiel

<div ng-app="myApp" ng-controller="personCtrl">

<p>Der Name ist{{ lastName | uppercase }}</p>

</div>

Selbst ausprobieren »

lowercaseDer Filter formatiert eine Zeichenfolge in Kleinbuchstaben:

AngularJS-Beispiel

<div ng-app="myApp" ng-controller="personCtrl">

<p>Der Name ist{{ lastName | lowercase }}</p>

</div>

Selbst ausprobieren »

currency-Filter

currencyDer Filter formatiert eine Zahl in ein Währungsformat:

AngularJS-Beispiel

<div ng-app="myApp" ng-controller="costCtrl">

<input type="number" ng-model="quantity">
<input type="number" ng-model="price">

<p>Gesamtpreis ={{ (quantity * price) | currency }}</p>

</div>

Selbst ausprobieren »

Einen Filter zu Direktiven hinzufügen

Filter können Direktiven mithilfe eines Pipe-Zeichens (|) und eines Filters hinzugefügt werden.

orderByDer Filter sortiert ein Array gemäß einem Ausdruck:

AngularJS-Beispiel

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

Selbst ausprobieren »

Filtereingabe

Der Eingabefilter kann einer Direktive mithilfe eines Pipe-Zeichens (|) und eines Filters hinzugefügt werden, gefolgt von einem Doppelpunkt und einem Modellnamen.

filterDer Filter wählt eine Teilmenge aus einem Array aus:

AngularJS-Beispiel

<div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

Selbst ausprobieren »

Benutzerdefinierter Filter

Das folgende Beispiel definiert einen benutzerdefinierten Filterreverse, der eine Zeichenfolge umkehrt:

AngularJS-Beispiel

var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.msg = "Beispiel"; }); app.filter('reverse', function() { //Sie können Abhängigkeiten injizieren return function(text) { return text.split("").reverse().join(""); } });

Selbst ausprobieren »
Andere Erweiterungen