Eigene Filter implementieren und testen

Filter sind in AngularJS ein mächtiges Konzept, um Daten vor der Ausgabe beliebig transformieren zu können. Grundsätzlich unterscheiden wir zwischen den so genannten Expression- und Collectionfiltern.

💡 Keine Lust zu lesen?

Nicht jeder lernt am besten aus Büchern und Artikeln. Lernen darf interaktiv sein und Spaß machen. Wir bieten dir auch Angular Intensiv-Schulungen an, damit du tiefer in die Thematik einsteigen kannst.

Mehr Informationen zur Angular-Schulung

Collectionfilter kommen in Verbindung mit der ngRepeat-Direktive zum Einsatz, während Expressionfilter - wie der Name es bereits vermuten lässt - in Expressions verwendet werden können.

In diesem Beitrag wollen wir uns den Expressionfiltern widmen. Wen die Collectionsfilter mehr interessieren, dem sei mein Artikel ng-repeat: Der Teufel im Schafspelz ans Herz gelegt, in dem ich unter Anderem vorstelle, wie man einen eigenen Collectionfilter implementiert.

Ein Expressionfilter wird - genau wie ein Collectionfilter - mit der filter()-Funktion von AngularJS definiert. Sie erwartet als ersten Parameter den Namen des Filters und als zweiten Parameter eine Funktion, die die Filterimplementierung zurückgibt. Die zurückgegebene Filterimplementierung definieren wir ebenfalls mithilfe einer Funktion.

Im nachfolgenden Beispiel sehen wir die Implementierung eines truncate-Filters. Dieser Filter überprüft, ob eine Zeichenkette mehr als charCount Zeichen enthält. Wenn das der Fall ist, dann wird die Zeichenkette abgeschnitten und durch drei Punkte (…) ergänzt. An diesem Filter können wir erkennen, dass Filter auch eine beliebige Anzahl von Parametern entgegennehmen können.

angular.module("myApp").filter("truncate", function () {
  return function (input, charCount) {
    var output = input;

    if (output.length > charCount) {
      output = output.substr(0, charCount) + "...";
    }

    return output;
  };
});

Wir können den truncate-Filter nun in einem Template in Verbindung mit einer Expression verwenden.

<p>{{ '0123456789' | truncate:3 }}</p>

Das Ergebnisse dieser Transformation würde somit folgendermaßen aussehen:

012…

Filter lassen sich übrigens auch sehr einfach testen. Wer keine Tests schreibt, ist also - wie so häufig - selbst schuld!

describe("Filter: truncate", function () {
  var truncate, $filter;

  beforeEach(module("myApp"));

  beforeEach(inject(function (_$filter_) {
    $filter = _$filter_;
  }));


[[cta:training-bottom]]

  beforeEach(function () {
    truncate = $filter("truncate");
  });

  it("should truncate the input accordingly", function () {
    expect(truncate("0123456789", 3)).toBe("012...");
  });
});