AngularJS - Eingaben in Formulare

Formulardatenverwaltung

In Webanwendungen ist der natürlichste Weg, Benutzerdaten zu erhalten, über Formulare. Mit ihnen können wir Elemente erstellen, die Text oder einfache Bestätigungen wie Kontrollkästchen erfassen, aber all dies kann als Benutzerdaten übersetzt werden, mit denen wir unterschiedliche Verarbeitungen durchführen können.
In AngularJS Die Arbeit mit diesen Dateneingaben ist sehr einfach, da wir aufgrund des Designs der Bibliothek einen Teil dieser Daten, die wir erhalten, in Aktionen in unserer Anwendung umwandeln können, entweder um Berechnungen durchzuführen oder ihr Verhalten zu definieren.
In diesem Abschnitt erfahren Sie, wie Sie Eingaben in Formularen mit AngularJS handhaben.
Wie funktioniert es?Die Art und Weise, wie wir die Vereinigung zwischen den Eingabeelementen und unserer Logik herstellen können in AngularJS ist sehr einfach, wir müssen die Eigenschaft verwenden ng-Modell und alles wird eine Art von Beziehung annehmen, sodass der Wert dessen, was wir durch die Form eingeben, manipuliert werden kann AngularJS, dies kann zutreffen auf Eingabetext, Optionsfelder, Kontrollkästchen usw..
Sehen wir uns unten ein kleines Beispiel für das an, was wir erklären:

Was hier passiert, ist, dass im Rahmen von Unser Verantwortlicher Wir können manipulieren, was der Benutzer im Markierungsfeld, dann, wenn der Benutzer es markiert, erhalten wir sofort Marker als wahr und wenn Sie es deaktivieren, erhalten wir die gegenteilige Antwort.
Wir können ein bisschen weiter gehen und wir können einsteigen Unser Verantwortlicher das Marker ist standardmäßig markiert, wenn der Benutzer die Seite zum ersten Mal sieht, wird das Kontrollkästchen markiert.
Aktionen hinzufügen
Aber nicht nur bei der Erfassung der Daten müssen wir bleiben, wir können und müssen auch Maßnahmen einbeziehen, sobald wir die Eingaben erhalten haben AngularJS Wir können Funktionen und Methoden aufrufen, die bei einem Ereignis unseres Eingabeelements ausgeführt werden, zum Beispiel werden wir einen kleinen Taschenrechner erstellen, der die Investitionsschätzung verwendet, um ein Unternehmen zu tätigen, was wir tun werden, ist den erhaltenen Wert mit 10 zu multiplizieren sehen:
1- Zuerst müssen wir die HTML-Elemente festlegen, die wir verwenden werden, wie im vorherigen Beispiel werden wir einen Controller erstellen und die Input wird Teil unseres Modells sein:

VERGRÖSSERN

2- Wir sehen, dass wir eine neue Eigenschaft eingeführt haben ng-Änderung und wir haben den Aufruf einer Funktion namens . zugewiesen calculoInversion () Dies bedeutet, dass jedes Mal, wenn sich unser Eingabefeld ändert, die Funktion aufgerufen wird, wie wir sehen, ist es etwas sehr Einfaches.
3- Jetzt bauen wir den Code mit AngularJS das wird dem, was wir gesehen haben, Leben einhauchen:

4- Wir bauen den passenden Controller, dann geben wir einen Anfangswert für das Modell an, in diesem Fall setzen wir ihn gleich 0, dies beinhaltet beide Elemente Geschätzte Initiale Was notwendig, dann erstellen wir die Funktion calculoInversion () Wir sehen, dass wir dies im sogenannten Bereich unseres Verantwortlichen tun, auf diese Weise ist es mit unserem Element verbunden. Damit sollte unsere Anwendung auf einem grundlegenden Niveau funktionieren.
Natürlich fehlen in diesem Beispiel mehrere Validierungen und es berücksichtigt nur, wenn der Benutzer den Wert des eingegebenen Textes ändert, aber es dient als Einführung, um Aktionen in unsere mit geschriebenen Anwendungen aufzunehmen AngularJS.
VorherigeSeite 1 von 2Nächste