In diesem Schritt lernen Sie, wie Sie Ihren eigenen Anzeigefilter erstellen.
Bitte setzen Sie das Arbeitsverzeichnis zurück:
Git Checkout -f Schritt 9
Gehen Sie nun zu einer Seite mit mobilen Details. Im vorherigen Schritt wird auf der Seite Telefondetails "true" oder "false" angezeigt, um anzuzeigen, ob ein Telefon über eine bestimmte Funktion verfügt. Jetzt verwenden wir einen benutzerdefinierten Filter, um diese Textzeichenfolgen zu gratschen: √ als „wahr“; und × als "falsch". Mal sehen, wie der Filtercode aussieht.
Die wichtigsten Unterschiede zwischen Schritt 8 und Schritt 9 sind unten aufgeführt. Sie können den vollständigen Unterschied im GitHub sehen.
Benutzerdefinierte Filter
Um einen neuen Filter zu erstellen, erstellen Sie zunächst ein PhonecatFilters -Modul und registrieren Sie den benutzerdefinierten Filter mit diesem Modul.
app/js/filters.js
Angular.module ('PhoneCatFilters', []). Filter ('checkmark', function () {return function (input) {return input? '/u2713': '/u2718';};});Unser Filter heißt Checkmark. Die Eingabe ist entweder wahr oder falsch, und wir geben zwei Unicode -Zeichen ( /u2713 und /u2718) zurück, die wahr oder falsch darstellen.
Nachdem unser Filter fertig ist, müssen wir unser PhonecatFilters -Modul als Abhängigkeit von unserem Hauptmodul -Phonecat registrieren.
App/JS/App/JS
... Angular.Module ('Phonecat', ['PhonecatFilters']) ...Vorlage
Da unser Vorlagencode in der Datei der App/JS/Filter.js geschrieben ist, müssen wir diese Datei in die Layout -Vorlage einführen.
app/index.html
... <script src = "js/Controller.js"> </script> <script src = "js/filters.js"> </script> ...
Die Syntax für die Verwendung von Filtern in AngularJS -Vorlagen lautet:
{{Ausdruck | filter}}
Wir wenden den Filter auf die Telefondetails -Vorlage an:
app/partials/Telefondetail.html
... <dl> <dt> Infrarot </dt> <dd> {{Telefon.Connectivity.infrared | checkmark}} </dd> <dt> gps </dt> <dd> {{Telefon.Connectivity.gps | checkmark}} </dd> </dl> ...prüfen
Filter sollten wie andere Komponenten getestet werden, und diese Tests sind tatsächlich einfach zu vervollständigen.
Test/Einheit/Filterspec.js
beschreiben ('filter', function () {voran (modul ('phonecatfilters')); beschreiben ('checkmark', function () {it ('sollte boolesche Werte in Unicode checkmark oder cross', inject (function (checkmarkfilter) {{teckmarkFilter (true)). erwarten (checkmarkFilter (false)). tobe ('/u2718'); });Beachten Sie, dass Sie vor der Durchführung von Filtertests unseren Testinjektor für das PhonecatFilters -Modul konfigurieren müssen.
Führen Sie ./Scripts/test/sh aus, um den Test auszuführen, und Sie sollten die folgende Ausgabe sehen:
Chrom: Runner Reset ...... insgesamt 4 Tests (bestanden: 4; Fehler: 0; Fehler: 0) (3,00 ms) Chrom 19.0.1084.36 MAC OS: Führen Sie 4 Tests aus (bestanden: 4; Fehler: 0; Fehler 0) (3,00 ms)
Üben wir nun den integrierten AngularJS-integrierten Filter und fügen Sie die folgenden Bindungen zu Index.html hinzu:
Wir können auch ein Eingangsfeld verwenden, um ein Modell zu erstellen und es mit einer filtrierten Bindung zu kombinieren. Fügen Sie den folgenden Code zu index.html hinzu:
<Eingabe ng-model = "userInput"> obercased: {{userInput | Großbuchstaben}}
Zusammenfassen
Nachdem Sie nun wissen, wie Sie ein benutzerdefiniertes Plugin schreiben und testen, werden wir in Schritt 10 lernen, wie Sie unsere Seite mit AngularJs weiterhin bereichern können.
Das obige ist eine Zusammenstellung der Informationen zum AngularJS -Filter. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Website!