AngularJS-Filter

Man kann in AngularJS Filter hinzufügen, um Daten zu formatieren.

AngularJS-Filter

AngularJS bietet Filter an, um Daten zu konvertieren:

• currency Zahlen in eine Währungsformat formatieren
• date Daten in einen bestimmten Format formatieren
• filter Eine Teilmenge aus einem Array auswählen
• json Ein Objekt in einen JSON-String formatieren
• limitTo Ein Array/Zeichenfolge auf eine bestimmte Anzahl von Elementen/Zeichen begrenzen
• lowercase Zeichenfolgen in Kleinbuchstaben formatieren
• number Zahlen in Zeichenfolgen formatieren
• orderBy Daten mit Ausdrücken sortieren
• uppercase Zeichenfolgen in Grossbuchstaben formatieren

Filter zu einem Ausdruck hinzufügen

Man kann einen Pipe-Symbol | verwenden, um Filter zu einem Ausdruck hinzuzufügen, gefolgt von einem Filter.

uppercase Der Filter formatiert Zeichenfolgen in Grossbuchstaben:

Beispiel

<div ng-app="myApp" ng-controller="personCtrl">
<p>Der Name ist {{ lastName | uppercase }}</p>
</div>

Versuchen Sie es selbst

lowercase Der Filter formatiert Zeichenfolgen in Kleinbuchstaben:

Beispiel

<div ng-app="myApp" ng-controller="personCtrl">
<p>Der Name ist {{ lastName | lowercase }}</p>
</div>

Versuchen Sie es selbst

Filter zu Anweisungen hinzufügen

durch Verwendung des Pipe-Zeichens | gefolgt von einem Filter, um Filter zu einer Anweisung hinzuzufügen, zum Beispiel ng-repeat:

Beispiel

Der "orderBy"-Filter sortiert das Array:

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

Versuchen Sie es selbst

Currency-Filter

currency Filter formatieren Zahlen in Währungen:

Beispiel

<div ng-app="myApp" ng-controller="costCtrl">
<h1>Preis: {{ price | currency }}</h1>
</div>

Versuchen Sie es selbst

Für weitere Informationen zum Filter "currency" lesen Sie unser AngularJS Currency-Filter-Referenzhandbuch.

Filter "filter"

filter Filter wählen einen Teil des Arrays aus.

filter Filter können nur für Arrays verwendet werden, sie geben ein Array mit nur den Übereinstimmungen zurück.

Beispiel

Gibt Namen zurück, die den Buchstaben "i" enthalten:

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | filter : 'i'">
    {{ x }}
  </li>
</ul>
</div>

Versuchen Sie es selbst

Für weitere Informationen zum Filter "filter" lesen Sie unser AngularJS Filter-Referenzhandbuch.

Filtern des Arrays basierend auf der Eingabe des Benutzers

durch Einstellen auf dem Eingabefeld ng-model Anweisungen, mit denen wir den Wert des Eingabefelds als Ausdruck im Filter verwenden können.

Geben Sie einen Buchstaben im Eingabefeld ein, die Liste wird basierend auf dem Treffer verkleinert/vergrößert:

• Jani
• Carl
• Margareth
• Hege
• Joe
• Gustav
• Birgit
• Mary
• Kai

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">
    {{ x }}
  </li>
</ul>
</div>

Versuchen Sie es selbst

Sortieren des Arrays basierend auf der Eingabe des Benutzers

Durch Klicken auf die Kopfzeile kann die Sortierreihenfolge geändert werden:

durch Hinzufügen zu den Kopfzeilen ng-click Anweisungen, mit denen wir eine Funktion ausführen können, die die Reihenfolge der Sortierung des Arrays ändert:

Beispiel

<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
  <tr>
    <th ng-click="orderByMe('name')">Name</th>
    <th ng-click="orderByMe('country')">Country</th>
  </tr>
  <tr ng-repeat="x in names | orderBy:myOrderBy">
    <td>{{x.name}}</td>
    <td>{{x.country}}</td>
  </tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Carl',country:'Sweden'},
    {name:'Margareth',country:'England'},
    {name:'Hege',country:'Norway'},
    {name:'Joe',country:'Denmark'},
    {name:'Gustav',country:'Sweden'},
    {name:'Birgit',country:'Denmark'},
    {name:'Mary',country:'England'},
    {name:'Kai',country:'Norway'}
  };
  $scope.orderByMe = function(x) {
    $scope.myOrderBy = x;
  }
});
</script>

Versuchen Sie es selbst

Benutzerdefinierter Filter

Sie können Ihren eigenen Filter durch die Registrierung einer neuen Filter-Fabrikfunktion im Modul erstellen:

Beispiel

Erstellen Sie einen benutzerdefinierten Filter mit dem Namen "myFormat":

<ul ng-app="myApp" ng-controller="namesCtrl">
  <li ng-repeat="x in names">
    {{x | myFormat}}
  </li>
</ul>
<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
  return function(x) {}}
    var i, c, txt = "";
    for (i = 0; i < x.length; i++) {
      c = x[i];
      if (i % 2 == 0) {
        c = c.toUpperCase();
      }
      txt += c;
    }
    return txt;
  });
});
app.controller('namesCtrl', function($scope) {
  $scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>

Versuchen Sie es selbst

myFormat Filter formatieren alle zwei Zeichen in Großbuchstaben.