In diesem Schritt fügen Sie eine Funktion hinzu, mit der Benutzer die Reihenfolge steuern können, in der die Telefonliste angezeigt wird. Auf diese Weise kann dynamische Sortierung implementiert werden, fügen Sie eine neue Modelleigenschaft hinzu, integrieren sie in den Iterator und ermöglichen dann, dass die Datenbindung den Rest durchführen.
Bitte setzen Sie das Arbeitsverzeichnis zurück:
Git Checkout -f Schritt 4
Sie sollten feststellen, dass Ihre App zusätzlich zum Suchfeld über ein zusätzliches Down -Menü verfügt, mit dem die Reihenfolge der Telefonanordnung gesteuert werden kann.
Die wichtigsten Unterschiede zwischen Schritt 3 und Schritt 4 sind unten aufgeführt. Sie können den vollständigen Unterschied im GitHub sehen.
Vorlage
app/index.html
Search: <input ng-model="query">Sort by:<select ng-model="orderProp"> <option value="name">Alphabetical</option> <option value="age">Newest</option></select><ul> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> {{phone.name}} <p> {{Telefon.snippet}} </p> </li> </ul>Wir haben die folgenden Änderungen in idex.html vorgenommen:
Zunächst haben wir ein <Select> -Tag namens OrderProp hinzugefügt, damit unsere Benutzer die beiden von uns bereitgestellten Sortiermethoden auswählen können.
Fügen Sie dann nach dem Filterfilter einen OrderBy -Filter hinzu, um die Daten zu verarbeiten, die in den Iterator eingeben. Der OrderBy -Filter nimmt ein Array als Eingabe an, kopiert eine Kopie und leitet die Kopie zurück und gibt es an den Iterator aus.
AngularJS erzeugt eine Zwei-Wege-Bindung zwischen dem Auswahlelement und dem Orderprop-Modell. Anschließend wird OrderProp als Eingabe für den OrderBy -Filter verwendet.
Wie wir bereits sagte, als wir Datenbindung und Iteratoren in Schritt 3 diskutierten, ändert sich das Datenmodell (z. B. der Benutzer im Dropdown-Menü eine andere Reihenfolge ausgewählt), die AngularJS-Datenbindung aktualisiert automatisch die Ansicht. Kein ungeschickter Dom -Betrieb!
Regler
App/JS/Controller.js:
function PhoneListCtrl($scope) { $scope.phones = [ {"name": "Nexus S", "snippet": "Fast just got faster with Nexus S.", "age": 0}, {"name": "Motorola XOOM™ with Wi-Fi", "snippet": "The Next, Next Generation tablet.", "age": 1}, {"name": "Motorola Xoom ™", "Snippet": "The Next, Tablet Next Generation", "Age": 2}]; $ scope.orderprop = 'ay';}Wir haben das Modell des Telefons - das Mobiltelefonarray - geändert, ein Altersattribut zu jedem Mobiltelefondatensatz hinzugefügt. Wir werden die Telefone nach dem Altersattribut sortieren.
Wir haben dem Controller -Code eine Zeile hinzugefügt, um den Standardwert von OrderProp zu bewirken. Wenn wir den Standardwert nicht festlegen, bleibt dieses Modell nicht initialisiert, bis unsere Benutzer im Dropdown-Menü eine Bestellung auswählen.
Jetzt sollten wir über die Bindung von Zwei-Wege-Daten sprechen. Beachten Sie, dass "neueste" im Dropdown-Menü "neueste" ausgewählt wird, wenn die App im Browser geladen wird. Dies liegt daran, dass wir in der Controller den Orderprop auf "Alter" festlegen. Die Bindung funktioniert also in Richtung unseres Modells an die Benutzeroberfläche - dh die Bindung von Daten aus dem Modell an die Ansicht. Wenn Sie nun im Dropdown-Menü "alphabetisch" auswählen, wird das Datenmodell gleichzeitig aktualisiert und das Telefonlisten-Array wird neu bestellt. Zu diesem Zeitpunkt wirkt sich die Datenbindung aus einer anderen Richtung aus - dh die Bindung von Daten aus der Ansicht zum Modell.
prüfen
Die von uns vorgenommenen Änderungen können durch einen Unit-Test oder einen End-to-End-Test überprüft werden. Schauen wir uns zunächst Einheitstests an:
Test/Einheit/ControllersSpec.js:
beschreiben ('Phonecat Controller', function () {beschreiben ('phonelistCtrl', function () {var scope, ctrl; vorab (function () {scope = {}, ctrl = new PhonelistCtrl (Scope); });Unit -Tests überprüfen nun, dass der Standardwert korrekt festgelegt wird.
Wir verwenden die Grenzfläche von Jasmine, um den PhonelistCtrl -Controller in einen Voran -Block zu extrahieren, der von allen Tests in allen beschreiben von Elternblocken gemeinsam genutzt wird.
Führen Sie diese Unit -Tests genau wie zuvor das Skript ./Scripts/test.sh aus, und Sie sollten die folgende Ausgabe sehen (Hinweis: Sie müssen http: // localhost: 9876 in Ihrem Browser öffnen und den strengen Modus eingeben, bevor der Test ausgeführt wird!):
Chrom: Runner Reset ... Gesamt 2 Tests (bestanden: 2; Fehler: 0; Fehler: 0) (3,00 ms) Chrom 19.0.1084.36 Mac OS: Run 2 Tests (bestanden: 2; Fehler: 0; Fehler 0) (3,00 ms)
Jetzt wenden wir uns auf End-to-End-Tests zu.
test/e2e/szenarien.js:
... IT ('sollte möglich sein, die telefonische Bestellung über das Dropdown-Box zu steuern', function () {// Lass den Datensatz eingrenzen, um die Testbehauptungen zu kürzeren Eingaben ('Abfrage'). ENTER ('Tablet'); erwarten (Repeater ('. Telefone li', 'Telefonliste'). Säule ('telefonisch'). Xoom/u2122 "]); select ('orderProp'). Option ('alphabetische'); erwarten (Repeater ('. Telefone li', 'Telefonliste'). Spalte ('Telefon.name')). Gift ([" Motorola xoom/u2122 "," Motorola x Xoom/u2122 mit Wi-Fi. ").Durch End-to-End-Tests wird überprüft, ob der Sortiermechanismus des Optionsfelds korrekt ist.
Sie können jetzt Ihren Browser aktualisieren und den End-to-End-Test erneut ausführen oder auf dem AngularJS-Server ausführen.
üben
Löschen Sie im PhonelistCtrl-Controller den Anweisung Setting OrderProp und Sie werden feststellen, dass AngularJS im Dropdown-Menü vorübergehend eine leere Option hinzufügt, und die Sortierreihenfolge ist die Standardsortierung (d. H. Unortiert).
Fügen Sie eine `{{orderProp}} -Bindung an die Index.html -Vorlage hinzu, um den Wert in Echtzeit anzuzeigen.
Zusammenfassen
Jetzt haben Sie Suchfunktionen für Ihre Anwendung bereitgestellt und sie vollständig getestet. Schritt 5 Wir werden über AngularJS 'Dienste und wie AngularJS eine Abhängigkeitsinjektion verwendet.
Das obige ist eine Zusammenstellung der Informationen für AngularJS-Zwei-Wege-Bindung. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Website!