AngularJS ng-submit mit Formularübermittlungsbeispiel

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-Formularsendebeispiel präsentieren wir einen Textbox dem Benutzer, in dem er das Thema eingeben kann, das er lernen möchte. Auf der Seite gibt es eine Schaltfläche zum Senden, mit deren Hilfe das Thema zu einer ungeordneten Liste hinzugefügt wird.

Senden Sie ein Formular in AngularJS mit ng-submit
Senden eines Formulars in AngularJS mit ng-submit

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()">
        &nbsp;&nbsp;&nbsp;
        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:

  1. Wir deklarieren zunächst unser Formular-HTML-Tag, das den Text „text“ enthält box” und „Senden-Schaltfläche“-Steuerelement, wie im Angular-Formular-Beispiel zum Senden eines Ereignisses gezeigt. Anschließend verwenden wir die Angular-Direktive ngsubmit, um die Funktion „Display()“ an unser Formular zu binden. Diese Funktion wird in unserem Controller definiert und beim Absenden des Formulars aufgerufen.
  2. 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.
  3. In AngularJS gibt es die normale Schaltfläche „Senden“, auf die der Benutzer klickt, wenn er das gewünschte Thema eingegeben hat.
  4. 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.
  5. In unserem Controller deklarieren wir eine Array-Variable namens „AllTopic“. Hier werden alle vom Benutzer in Schritt 2 eingegebenen Themen gespeichert.
  6. 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 Folgendes angezeigt:wing Die Ausgabe wird angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgang:

Senden Sie ein Formular in AngularJS

Um zu sehen, wie der Code funktioniert, geben Sie zunächst einen Themennamen wie „Angular“ ein, wie oben im Text gezeigtbox und klicken Sie dann auf die Schaltfläche „Senden“.

Senden Sie ein Formular in AngularJS

  • Nachdem Sie auf die Schaltfläche „Senden“ geklickt haben, sehen Sie das Element, das im Text eingegeben wurdebox zur Artikelliste 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.