Very Basic Angular App: Teil 2

Im zweiten Teil des Tutorials geht es um das Filtern und Sortieren. Die Daten liegen im JSON Format vor.

Wie im ersten Teil dieser Anleitung bereits erwähnt handelt es sich bei diesem Beispiel um meine eigene Hompage. Ich verwende zwei unterschiedliche Auswahloptionen: Selectboxen und Checkboxen. Mit Hilfe der Selectbox kann man die Liste der Artikel sortieren (in diesem Beispiel nach Aktualität und Umfang). Die Checkboxen hingegen dienen zum Filtern der Ergebnisliste.

Werfen wir zunächst einen Blick in die JSON Datei, in der alle Artikel (in diesem Beispiel Referenzen) verzeichnet sind.

[
  {
    "name": "Ayurvedisch Kochen",
    "url": "http://www.prabhav.de",
    "thumb": "images/referenzen/thumb/prabhav.png",
    "age": 60,
    "size": 600,
    "typo3": true,
    "mobile": true,
    "id": "prabhav"
  },
  {
    "name": "Sajal Karmakar, Kolkata",
    "url": "http://www.sajalkarmakar.com",
    "thumb": "images/referenzen/thumb/karmakar.png",
    "age": 75,
    "size": 1000,
    "typo3": true,
    "mobile": false,
    "id": "karmakar"
  },
  {
    ...
  }
]

Angular: Sortieren mit einer Selectbox

Die hier gezeigten Daten beziehen sich auf zwei meiner Referenzprojekte. „age“ und „size“ sind die Parameter, die in der Selectbox ausgewählt werden können. Die Standardsortierung zeigt die Projekte mit den kleineren Ziffern zuerst an. In diesem Beispiel wird die obere Website (prabhav) also in beiden Fällen vor der zweiten (karmakar) angezeigt, da sie sowohl umfangreicher („size“) als auch jünger („age“) ist (beide Zahlen niedriger sind).

Folgendermaßen sieht der HTML Code aus, der das Sortieren möglich macht:

<h3>Referenzen / Kundenprojekte sortieren</h3>
<select ng-model="orderProp" class="form-control">
  <option value="age">Neueste zuerst</option>
  <option value="size">Umfangreichste zuerst</option>
</select>

Das select Element bekommt das Attribut ng-model mit dem Wert orderProp, die option Einträge werden mit dem entsprechenden value versehen.

Damit die Artikel / Referenzen gemäß der Auswahl in der Selectbox angezeigt werden, benötigt man in dem div, der die Daten anzeigt, den Wert orderBy:orderProp innerhalb des Attributs ng-repeat. Die gesamte Zeile sieht so aus:

<div class="referenzen" ng-repeat="referenz in referenzen | orderBy:orderProp">
  ...
</div>

Will man, dass die Selectbox bereits vorbelegt ist mit der angezeigten Auswahl (in diesem Fall die neuesten zuerst), so benötigt man noch eine Zeile im Contoller:

$scope.orderProp = 'age'

Den Controller benötigt man ohnehin, um die Daten der JSON Datei anzuzeigen (darauf will ich hier nicht näher eingehen). Kurz gesagt muss die Datei app.js, die ich im Teil 1 vorgestellt habe, um folgenden Eintrag erweitert werden:

app.controller('ReferenzenCtrl', ['$scope', '$http', function ($scope, $http) {
  $http.get('referenzen/referenzen.json').success(function(data) {
    $scope.referenzen = data;
  });
  $scope.orderProp = 'age';
}]);

Angular: Filtern mit Checkboxen

Zum Filtern der Ergebnisliste dienen diverse Checkboxen. In meinem Beispiel möchte ich danach filtern können, ob die Projekte mit oder ohne TYPO3 gemacht wurden und ob sie optimiert sind für die Darstellung auf mobilen Endgeräten. So gehts:

<h3>Referenzen / Kundenprojekte filtern</h3>
<label>nur TYPO3 Projekte<input type="checkbox" ng-model="options.typo3" ng-false-value=''></label>
<label>nur Projekte ohne TYPO3<input type="checkbox" ng-model="options.typo3" ng-false-value='' ng-true-value='false'></label>
<label>nur mobil optimierte Projekte<input type="checkbox" ng-model="options.mobile" ng-false-value=''></label>

Der Wert options.typo3 im Attribut („directive“) ng-model prüft, ob in der JSON Datei der Schlüssel „typo3“ den Wert „true“ hat. Für die Anzeige innerhalb des divs benötigt man nun noch den entsprechenden Filter, der in diesem Fall so aussieht:

filter:options

Mit einer Pipe getrennt kann man ihn nach der Sortierangabe einfügen:

<div class="referenzen" ng-repeat="referenz in referenzen | orderBy:orderProp | filter:options">
  ...
</div>

Ist man soweit gekommen stellt man fest, dass man damit zwar filtern kann indem man die entsprechenden Häkchen setzt, dass aber nicht mehr – wie es gewünscht ist – sämtliche Ergebnisse angezeigt werden, wenn man die Häkchen wieder entfernt. Um das zu erreichen verwendet man das Attribut ng-false-value mit einem leeren Wert:

<h3>Referenzen / Kundenprojekte filtern</h3>
<label>nur TYPO3 Projekte <input type="checkbox" ng-model="options.typo3" ng-false-value="''"></label>
<label>nur Projekte ohne TYPO3 <input type="checkbox" ng-model="options.typo3" ng-false-value="''" ng-true-value="'false'"></label>
<label>nur mobil optimierte Projekte <input type="checkbox" ng-model="options.mobile" ng-false-value="''"></label>

Achtung: Je nach verwendeter Angular Version müssen hier innerhalb der Anführungszeichen nochmals einfache Anführungszeichen gesetzt werden. das Beispiel hier (mit den doppelten Anführungszeichen) funktioniert für die Angular Versionen ab 1.3.x.

Die beiden sich ausschließenden Optionen („Nur TYPO3 Projekte“ und „nur Projekte ohne TYPO3“) bekommt man mit den Attributen ng-false-value und ng-true-value ebenfalls sehr schön in den Griff (s.o.).

Demolink: www.matthaa.de/#/referenzen
Tutoriallink: docs.angularjs.org/tutorial