Sortieren und Filtern in einer Liste mit Angular.js

Anhand von praxisbezogenen Anwendungsfällen demonstriere ich in meinen Angular-Blogposts konkrete Funktionen aus der JavaScript-Bibliothek. In diesem Code-Beispiel wird eine Liste, deren Inhalte aus einem ASP.NET Web API-Service stammen, sortiert und gefiltert. Die Daten kommen aus der Northwind SQL Server Datenbank. Am Ende wird eigentlich nur JSON übermittelt. Es geht auch ohne Service.

Ziel ist es, ein Suchfeld zum Filtern der Daten und die Sortierung durch Klick auf den Header zu ändern.

image

Das Angular Module wird mit einem Controller versehen. Dieser enthält den Scope, der als Viewmodel dient und die Daten enthält. Hier die Liste der Kunden, aus der Rückgabe des REST Ajax Calls.

   1:  angular.module('kunden2App', [])
   2:  .controller('CRUDController', function ($scope, $http) {
   3:      $scope.customers = [];
   4:      $http.get('api/Customers/').success(function (data) {
   5:          $scope.customers = data;
   6:      })
   7:      .error(function (data) {
   8:          $scope.error = "Fehler " + data.ExceptionMessage;
   9:      });
  10:  });

Am einfachsten lässt sich eine Suche implementieren: dem Viewmodel wird einfach per ng-model Direktive eine neue und gebundene Eigenschaft zugewiesen, hier in Zeile 5 mit Search bezeichnet. In ng-repeat wird über das Pipe-Symbol getrennt nach der Iterationsanweisung (Zeile 11) der Filter Ausdruck angefügt. In diesem Fall wird der von Angular vordefinierte Filter verwendet. Es lassen sich auch eigene Filter mit der Notation .filter in JavaScript erstellen. Die Dokumentation hat dazu ein nettes Beispiel, das Check Icons darstellt.

Andere vordefinierte Filter gibt es z.B. für Formatierung von Datumswerten. Dieser wird dann direkt im Binding angegeben.

{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}

Auch die voreingestellte Sortierung wird über den Order-by-Filter definiert. Aber auch der Benutzer kann die Reihenfolge der Firmennamen ändern, indem er auf den Header klickt. Hier werden die Direktiven ng-click und ng-source eingesetzt. Aus erstem wird ein Click Event, das den Wert von reverse toggelt. Dieser Wert wird zur Steuerung des Order-by-Statements verwendet. Um ein Icon anzuzeigen, wird die Image Source an ein Bild gebunden, das ich downfalse.gif und downtrue.gif genannt habe. Ein kleiner Trick mit geringem Code und großer Wirkung.

   1:   
   2:  <body ng-app="kunden2App">
   3:     <div ng-controller="CRUDController">
   4:         <h2>Customers</h2>
   5:         Name Suchen <input type="text" ng-model="search" />
   6:         <table >
   7:           <tr>
   8:             <th>#</th>
   9:             <th> <a href="" 
ng-click="reverse=!reverse;order('CompanyName', reverse)">Name
<img ng-src="img/down{{reverse}}.gif"></a></th>
  10:           </tr>
  11:           <tr 
ng-repeat="customer in customers | filter:search | orderBy:'CustomerID':reverse" >
  12:               <td>{{ customer.CustomerID }}</td>
  13:               <td>{{ customer.CompanyName }}</td>
  14:            </tr>
  15:         </table>
  16:     </div>
  17:  <script src="Scripts/angular.js"></script>
  18:  <script src="CRUDController.js"></script>
  19:  </body>
  20:   

Am Ende sehr überschaubarer Aufwand.

Kommentare sind geschlossen