AngularJS ng-submit mit Formularübermittlungsbeispiel
James Hartmann
AngularJS ng-submit-Direktive
Das ng-submit Die Direktive in AngularJS wird verwendet, um die Anwendung an das Submit-Ereignis des Browsers zu binden. Also im Fall von AngularJS Beim Submit-Ereignis können Sie einige Verarbeitungen innerhalb des Controllers selbst durchführen und dann die verarbeiteten Informationen dem Benutzer anzeigen.
So senden Sie ein Formular in AngularJS mit ng-submit
Die Prozesse der Übermittlung von Informationen auf einer Webseite werden normalerweise durch das Submit-Ereignis im Webbrowser abgewickelt. Dieses Ereignis wird normalerweise verwendet, um Informationen, die der Benutzer möglicherweise auf einer Webseite eingegeben hat, zur weiteren Verarbeitung an den Server zu senden, z. B. Anmeldeinformationen, Formulardaten usw. Die Übermittlung von Informationen kann über eine GET- oder POST-Anfrage erfolgen.
Nehmen wir ein Angular-Formular-Übermittlungsbeispiel, um zu sehen, wie Formulare in AngularJS übermittelt werden.
In unserem AngularJS-Formular-Übermittlungsbeispiel präsentieren wir dem Benutzer ein Textfeld, in das er das Thema eingeben kann, über das er sich informieren möchte. Auf der Seite befindet sich eine Senden-Schaltfläche, die, wenn sie gedrückt wird, das Thema zu einer ungeordneten Liste hinzufügt.
Beispiel für das Absenden eines AngularJS-Formulars
Jetzt sehen wir ein Beispiel für die Übermittlung eines AngularJS-Formulars vom Controller mithilfe der ng-submit-Direktive:
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form ng-submit="Display()">
Enter which topic you would like to learn
<input type="text" ng-app="sampleApp" ng-model="Topic"><br>
<input type="submit" value="Submit"/>
<ul ng-repeat="topicname in AllTopic">
<li>{{topicname}}</li>
</ul>
</form>
</div>
<script>
var sampleApp = angular.module("sampleApp",[]);
sampleApp.controller("AngularController",function($scope) {
$scope.AllTopic=[];
$scope.Display = function () {
$scope.AllTopic.push($scope.Topic);
}
});
</script>
</body>
</html>
Code-Erklärung:
- Wir deklarieren zuerst unseren HTML-Tag für das Formular, der das Steuerelement „Textfeld“ und „Senden-Schaltfläche“ enthält, wie im Beispiel für das Senden-Ereignis des Angular-Formulars gezeigt. Dann verwenden wir die Angular-Direktive ngsubmit, um die Funktion „Display()“ an unser Formular zu binden. Diese Funktion wird in unserem Controller definiert und aufgerufen, wenn das Formular gesendet wird.
- Wir verfügen über ein Textsteuerelement, in das der Benutzer das Thema eingibt, das er lernen möchte. Dies wird an eine Variable namens „Topic“ gebunden, die in unserem Controller verwendet wird.
- In AngularJS gibt es die normale Schaltfläche „Senden“, auf die der Benutzer klickt, wenn er das gewünschte Thema eingegeben hat.
- Wir haben das benutzt ng-Wiederholung Direktive zum Anzeigen von Listenelementen der vom Benutzer eingegebenen Themen. Die ng-repeat-Direktive geht jedes Thema im Array „AllTopic“ durch und zeigt den Themennamen entsprechend an.
- In unserem Controller deklarieren wir eine Array-Variable namens „AllTopic“. Hier werden alle vom Benutzer in Schritt 2 eingegebenen Themen gespeichert.
- Wir definieren den Code für unsere Display()-Funktion, die immer dann aufgerufen wird, wenn der Benutzer auf die Schaltfläche „Senden“ klickt. Hier verwenden wir die Push-Array-Funktion, um die vom Benutzer über die Variable „Topic“ eingegebenen Themen zu unserem Array „AllTopic“ hinzuzufügen.
Wenn der Beispielcode des AngularJS-Formulars erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgang:
Um den Code in Aktion zu sehen, geben Sie zunächst einen Themennamen wie „Angular“ ein, wie oben im Textfeld gezeigt, und klicken Sie dann auf die Schaltfläche „Senden“.
- Nachdem Sie auf die Schaltfläche „Senden“ geklickt haben, wird das in das Textfeld eingegebene Element zur Elementliste hinzugefügt.
- Dies wird durch die Funktion Display() erreicht, die aufgerufen wird, wenn die Schaltfläche „Senden“ gedrückt wird.
- Die Funktion Display() fügt den Text der Array-Variablen namens „AllTopic“ hinzu. Und unsere ng-repeat-Direktive geht jeden Wert in der Array-Variablen „AllTopic“ durch und zeigt sie entsprechend als Listenelemente an.
Zusammenfassung
- Die Direktive „ng-submit“ wird verwendet, um die Eingaben zu verarbeiten, die der Benutzer für die Formularübermittlung in AngularJS eingegeben hat.
- Die Prozesse der Übermittlung von Informationen auf einer Webseite werden normalerweise durch das Submit-Ereignis im Webbrowser abgewickelt.
- Die Übermittlung von Informationen kann über eine GET- oder POST-Anfrage erfolgen.
- Die Funktion Display() fügt den Text der Array-Variablen namens „AllTopic“ hinzu.
