In Angular eingebaute Filter für ng-repeat nutzen

Angular hat für ng-repeat, also für die Darstellung von Listen eingebaute Filter. Welche das sind und wie diese funktionieren, zeigt dieser Artikel.

von: Michael Wichert | 9. Okt 2014

orderBy Filter, um eine Liste zu sortieren

Filter bindet man ein, indem man "| filterangaben" hinzufügt. Mit dem orderBy Filter kann man nach bestimmten Werten absteigend oder aufsteigend Filtern = Sortieren:

<ul>
    <li ng-repeat="ort in orte | orderBy: 'name'">Stadt: {{ort.name}}</li>
</ul>

Um die Sortierung umzukehren, setzt man ein "-" vor den Feldnamen, nach dem sortiert werden soll:

<ul>
    <li ng-repeat="ort in orte | orderBy: '-name'">Stadt: {{ort.name}}</li>
</ul>

Anzahl der angezeigten Elemente eingrenzen mit limitTo Filter

Angenommen man hat 10 Elemente, dann kann man die Anzeige auf die Anzahl X eingrenzen.

Hier werden die ersten 5 Elemente angezeigt:

<ul>
    <li ng-repeat="ort in orte | limitTo: 5">Stadt: {{ort.name}}</li>
</ul>

Es lässt sich aber auch umkehren, auf die letzten 5 Elemente der Daten . . . mit einem "-" vor der Mengenangabe:

<ul>
    <li ng-repeat="ort in orte | limitTo: -5">Stadt: {{ort.name}}</li>
</ul>

Filter lassen sich kombinieren

Man ist nicht auf den Einsatz eines einzigen Filter begrenzt. Filter lassen sich auch gleichzeitig einsetzen.

Hier: Sortiere nach Name und zeige die letzten 5 an:

<ul>
    <li ng-repeat="ort in orte | orderBy: 'name' | limitTo: -5">Stadt: {{ort.name}}</li>
</ul>

Und zusätzlich könnte man es noch gemäß der Eingabe in einer Inputbox filtern . . . wie hier:

<input type="text" ng-model="suchen.name">
<ul>
    <li ng-repeat="ort in orte | orderBy: 'name' | limitTo: -5 | filter:suchen">
        Stadt: {{ort.name}}
    </li>
</ul>