So kann man mit der Angular Directive ng-repeat Listen darstellen und dann auch filtern

ng-repeat ist eine fantastische Möglichkeit, Listen darzustellen . . . generell Elemente die gleich sind, und nur jeweils andere Daten enthalten. Dies eignet sich bspw. für Tabellen und Fotogallerien.

Hier die Schritte ng-repeat einzubinden.

von: Michael Wichert | 7. Okt 2014

Bevor wir etwas darstellen können, brauchen wir ein paar Daten. Im Normalfall kommen diese aus einer Datenbank. Hier lege ich ein paar Daten im Skript als Array an:

Schritt 1: Daten anlegen

var daten = [
                    {
                        stadt:'Bonn',
                        plz:53177
                    },
                    {
                        stadt:'Berlin',
                        plz:13351
                    },
                    {
                        stadt: 'München',
                        plz:80331
                    }
                ]

Schritt 2: Controller anlegen und die Daten dort dem $scope zuweisen

Für den Zugriff auf die Daten im View, erfolgt hier die Zuweisung der Daten zum $scope:

...
meineApp.controller('firstCtrl',function($scope){

    $scope.orte = daten;

})  

Schritt 3: Einbindung des Controllers im HTML-Code

<div ng-controller="firstCtrl">

    // Anzeige der Daten

</div>

Schritt 4: Einbindung des HTML Codes für die Anzeige der Daten

Hier mal als Beispiel innerhalb einer Tabelle:

<div ng-controller="firstCtrl">
    <table>
        <tr>
            <td>Stadt</td>
            <td>PLZ</td>
        </tr>
        <tr>
            <td>{{stadt}}</td>
            <td>{{plz}}</td>
        </tr>
    </table>
</div>

Damit hat man jetzt eine Tabelle mit Tabellenkopf Stadt und PLZ. Die Zeilen mit den jeweiligen Städten sollen sich jetzt automatisch wiederholen. Man gibt diese also nur 1x an . . . den Rest macht Angular mit ng-repeat.

Schritt 5: ng-repeat einbinden für Wiederholung von Zeilen und Anzeige der Daten

<div ng-controller="firstCtrl">
    <table>
        <tr>
            <td>Stadt</td>
            <td>PLZ</td>
        </tr>
        <tr ng-repeat="ort in orte">
            <td>{{ort.stadt}}</td>
            <td>{{ort.plz}}</td>
        </tr>
    </table>
</div>

ng-repeat weist man also dem Element zu, welches samt Inhalt wiederholt werden soll. In diesem Fall jede Stadt mit PLZ als eigene Zeile.

Daten in Echtzeit über ein Eingabefeld filtern

Bei dem Beispiel geht es noch. Bei längeren Listen wäre es interessant die Anzeige eingrenzen zu können. Dies ist über ein Eingabefeld sehr einfach möglich.

Schritt 1: Eingabefeld anlegen

Zum bisherigen Code füge ich eine Inputbox hinzu:

<div ng-controller="firstCtrl">
    <input type="text" ng-model="suchen">
    <table>
        <tr>
            <td>Stadt</td>
            <td>PLZ</td>
        </tr>
        <tr ng-repeat="ort in orte">
            <td>{{ort.stadt}}</td>
            <td>{{ort.plz}}</td>
        </tr>
    </table>
</div>

Schritt 2: Bei ng-repeat einen Filter hinzufügen

Der Filter bezieht sich hier auf die Eingabebox.

<div ng-controller="firstCtrl">
    <input type="text" ng-model="suchen">
    <table>
        <tr>
            <td>Stadt</td>
            <td>PLZ</td>
        </tr>
        <tr ng-repeat="ort in orte | filter:suchen">
            <td>{{ort.stadt}}</td>
            <td>{{ort.plz}}</td>
        </tr>
    </table>
</div>

Nur nach einer Property filtern - Beispiel Stadt

Bei Eingabe in der Inputbox passt sich nun die Anzeige der Tabelle automatisch an. Bei diesem Filter werden aktuell Stadt und PLZ berücksichtigt.

Man kann es aber auch eingrenzen.

Hierzu passe ich das ng-model Attribut der Eingabebox an:

<div ng-controller="firstCtrl">
    <input type="text" ng-model="suchen.stadt">
    <table>
        <tr>
            <td>Stadt</td>
            <td>PLZ</td>
        </tr>
        <tr ng-repeat="ort in orte | filter:suchen">
            <td>{{ort.stadt}}</td>
            <td>{{ort.plz}}</td>
        </tr>
    </table>
</div>

Jetzt werden bei der Filterung nur die Stadtnamen berücksichtigt.