AngularJS-formulier indienen met voorbeeld (ng-submit)

Anonim

Hoe een formulier in te dienen met ng-submit

De processen voor het indienen van informatie op een webpagina worden normaal gesproken afgehandeld door de verzendgebeurtenis in de webbrowser. Deze gebeurtenis wordt normaal gesproken gebruikt om informatie die de gebruiker op een webpagina heeft ingevoerd naar de server te sturen voor verdere verwerking, zoals inloggegevens, formuliergegevens, enz. Het indienen van informatie kan worden gedaan door middel van een GET- of POST-verzoek.

AngularJS biedt ook een richtlijn met de naam ng-submit die kan worden gebruikt om de applicatie te binden aan de submit-gebeurtenis van de browser. Dus in het geval van AngularJS, kunt u tijdens de verzendgebeurtenis enige verwerking uitvoeren binnen de controller zelf en vervolgens de verwerkte informatie aan de gebruiker weergeven.

Laten we een voorbeeld nemen van hoe we dit kunnen bereiken.

In ons voorbeeld van een post indienen,

We gaan een tekstvak aan de gebruiker presenteren waarin ze het onderwerp kunnen invoeren dat ze willen leren. Er zal een verzendknop op de pagina zijn, die, wanneer erop wordt gedrukt, het onderwerp aan een ongeordende lijst zal toevoegen.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Code Verklaring:

  1. We declareren eerst onze HTML-code voor het formulier, die het besturingselement "tekstvak" en "verzendknop" zal bevatten. We gebruiken dan de ng-submit richtlijn om de functie "Display ()" aan ons formulier te binden. Deze functie wordt gedefinieerd in onze controller en wordt aangeroepen wanneer het formulier wordt verzonden.
  2. We hebben een tekstcontrole waarin de gebruiker het onderwerp invoert dat hij wil leren. Dit wordt gebonden aan een variabele genaamd 'Topic' die zal worden gebruikt in onze controller.
  3. Er is de normale verzendknop waarop de gebruiker zal klikken wanneer ze het gewenste onderwerp hebben ingevoerd.
  4. We hebben de instructie ng-repeat gebruikt om lijstitems weer te geven van de onderwerpen die de gebruiker invoert. De instructie ng-repeat doorloopt elk onderwerp in de array 'AllTopic' en geeft de naam van het onderwerp dienovereenkomstig weer.
  5. In onze controller declareren we een arrayvariabele met de naam 'AllTopic'. Dit wordt gebruikt om alle onderwerpen vast te houden die de gebruiker in stap 2 heeft ingevoerd.
  6. We definiëren de code voor onze functie Display () die wordt aangeroepen wanneer de gebruiker op de knop Verzenden klikt. Hier gebruiken we de push array-functie om de onderwerpen die de gebruiker heeft ingevoerd via de variabele 'Topic' toe te voegen aan onze array 'AllTopic'.

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

Om de code te zien werken, voert u eerst een onderwerpnaam in zoals "AngularJS" zoals hierboven weergegeven in het tekstvak en klikt u vervolgens op de knop Verzenden.

  • Nadat op de verzendknop is geklikt, ziet u het item dat in het tekstvak is ingevoerd, toegevoegd aan de lijst met items.
  • Dit wordt bereikt door de functie Display (), die wordt aangeroepen wanneer de knop Verzenden wordt ingedrukt.
  • De functie Display () voegt de tekst toe aan de arrayvariabele genaamd 'AllTopic'. En onze ng-repeat-richtlijn doorloopt elke waarde in de arrayvariabele 'AllTopic' en geeft ze dienovereenkomstig weer als lijstitems.

Overzicht

De "ng-submit" -richtlijn wordt gebruikt om de invoer te verwerken die door de gebruiker is ingevoerd bij het verzenden van het formulier.