Eigene Filter implementieren und testen

angularjs | Philipp Tarasiewicz | 2 Minuten

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. 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_;
  }));

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

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

Inhaltsverzeichnis


Email Newsletter

Um alle Neuigkeiten zu erfahren, abonniere hier unseren Newsletter!

Newsletter abonnieren
Philipp Tarasiewicz

Philipp Tarasiewicz

Philipp Tarasiewicz ist Technologieberater, Autor, Speaker und Coach im Umfeld des Webs. Seit einigen Jahren hat er sich auf den Bereich Enterprise JavaScript, insbesondere AngularJS, spezialisiert und unterstützt Unternehmen bei der Aus- und Fortbildung ihrer Mitarbeiter wie auch beim Ramp-Up neuer Projekte. Zusammen mit Robin Böhm hat er das erste deutschsprachige AngularJS-Buch geschrieben (dpunkt.verlag). Sind Sie interessiert an Beratung, Coaching oder einem Workshop im Bereich JavaScript und AngularJS? Senden Sie Ihm einfach eine Nachricht!