AngularJS Form Submit mit Beispiel (ng-submit)

Anonim

So senden Sie ein Formular mit ng-submit

Die Prozesse zum Übermitteln von Informationen auf einer Webseite werden normalerweise vom Übermittlungsereignis im Webbrowser ausgeführt. 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-Anforderung erfolgen.

AngularJS bietet auch eine Direktive namens ng-submit, mit der die Anwendung an das Submit-Ereignis des Browsers gebunden werden kann. Im Fall von AngularJS können Sie beim Senden-Ereignis eine Verarbeitung innerhalb des Controllers selbst ausführen und die verarbeiteten Informationen dann dem Benutzer anzeigen.

Nehmen wir ein Beispiel, wie wir dies erreichen können.

In unserem Submit-Post-Beispiel

Wir werden dem Benutzer ein Textfeld präsentieren, in das er das Thema eingeben kann, das er lernen möchte. Auf der Seite befindet sich eine Schaltfläche zum Senden, mit der das Thema einer ungeordneten Liste hinzugefügt wird, wenn es gedrückt wird.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Code Erläuterung:

  1. Wir deklarieren zuerst unser Formular-HTML-Tag, das das Steuerelement "Textfeld" und "Senden-Schaltfläche" enthält. Wir verwenden dann die Anweisung ng-submit, um die Funktion "Display ()" an unser Formular zu binden. Diese Funktion wird in unserem Controller definiert und beim Absenden des Formulars aufgerufen.
  2. Wir haben ein Textsteuerelement, in dem 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. Es gibt die normale Senden-Schaltfläche, auf die der Benutzer klickt, wenn er das gewünschte Thema eingegeben hat.
  4. Wir haben die Anweisung ng-repeat verwendet, um Listenelemente der Themen anzuzeigen, die der Benutzer eingibt. Die Direktive ng-repeat geht jedes Thema im Array 'AllTopic' durch und zeigt den Themennamen entsprechend an.
  5. In unserem Controller deklarieren wir eine Array-Variable namens 'AllTopic'. Dies wird verwendet, um alle Themen zu speichern, die der Benutzer in Schritt 2 eingegeben hat.
  6. Wir definieren den Code für unsere Display () -Funktion, der 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 in unser Array 'AllTopic' einzufügen.

Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgabe:

Um zu sehen, wie der Code funktioniert, geben Sie zuerst einen Themennamen wie "AngularJS" wie oben gezeigt in das Textfeld ein und klicken Sie dann auf die Schaltfläche "Senden".

  • Nachdem Sie auf die Schaltfläche "Senden" geklickt haben, wird das Element angezeigt, das in das der Liste der Elemente hinzugefügte Textfeld eingegeben wurde.
  • Dies wird durch die Funktion Display () erreicht, die aufgerufen wird, wenn die Senden-Taste gedrückt wird.
  • Die Funktion Display () fügt den Text der Array-Variablen 'AllTopic' hinzu. Unsere ng-repeat-Direktive durchläuft jeden Wert in der Array-Variablen 'AllTopic' und zeigt sie entsprechend als Listenelemente an.

Zusammenfassung

Die Direktive "ng-submit" wird verwendet, um die vom Benutzer beim Senden des Formulars eingegebenen Eingaben zu verarbeiten.