AngularJS-formulär Skicka med exempel (ng-skicka)

Innehållsförteckning

Hur man skickar in ett formulär med ng-submit

Processerna för att skicka information på en webbsida hanteras normalt av skicka händelsen i webbläsaren. Denna händelse används normalt för att skicka information som användaren kan ha angett på en webbsida till servern för vidare bearbetning som inloggningsuppgifter, formulärdata etc. Inlämning av information kan göras via GET- eller POST-begäran.

AngularJS tillhandahåller också ett direktiv som kallas ng-submit som kan användas för att binda applikationen till webbläsarens överföringshändelse. Så när det gäller AngularJS kan du vid inlämningshändelsen utföra viss bearbetning inom själva styrenheten och sedan visa bearbetad information för användaren.

Låt oss ta ett exempel på hur vi kan uppnå detta.

I vårt exempel på skicka inlägg,

Vi kommer att presentera en textruta för användaren där de kan skriva in ämnet som de vill lära sig. Det kommer att finnas en inlämningsknapp på sidan, som när du trycker på den kommer att lägga till ämnet i en oordnad lista.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Kodförklaring:

  1. Vi förklarar först vår HTML-tagg som innehåller "textrutan" och "skicka knappen" kontroll. Vi använder sedan ng-submit-direktivet för att binda funktionen "Display ()" till vårt formulär. Denna funktion kommer att definieras i vår controller och kommer att anropas när formuläret skickas.
  2. Vi har en textkontroll där användaren kommer in i ämnet de vill lära sig. Detta kommer att vara bunden till en variabel som heter 'Ämne' som kommer att användas i vår controller.
  3. Det finns den normala inlämningsknappen som användaren klickar på när de har angett det ämne de vill ha.
  4. Vi har använt ng-repeat-direktivet för att visa listobjekt över de ämnen som användaren skriver in. Direktivet om upprepning av ng går igenom varje ämne i matrisen 'AllTopic' och visar ämnesnamnet därefter.
  5. I vår controller förklarar vi en matrisvariabel som heter 'AllTopic'. Detta kommer att användas för att hålla alla ämnen som användaren har angett i steg 2.
  6. Vi definierar koden för vår Display () -funktion som kommer att anropas när användaren klickar på knappen Skicka. Här använder vi push array-funktionen för att lägga till de ämnen som användaren har angett via variabeln "Topic" i vår array "AllTopic."

Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.

Produktion:

För att se koden fungerar, ange först ett ämnesnamn som "AngularJS" som visas ovan i textrutan och klicka sedan på knappen Skicka.

  • När du har klickat på knappen Skicka ser du att objektet som matades in i textrutan läggs till i listan med objekt.
  • Detta uppnås med Display () -funktionen, som kallas när du trycker på inlämningsknappen.
  • Funktionen Display () lägger till texten till arrayvariabeln som heter 'AllTopic'. Och vårt ng-repeat-direktiv går igenom varje värde i arrayvariabeln 'AllTopic' och visar dem som listobjekt i enlighet därmed.

Sammanfattning

Direktivet "ng-submit" används för att bearbeta den inmatning som användaren har angett när formuläret skickas.

Intressanta artiklar...