AngularJS űrlap benyújtása példával (ng-submit)

Anonim

Hogyan küldjön űrlapot az ng-submit használatával

Az információk weboldalon történő benyújtásának folyamatait általában a webböngészőben beküldött esemény kezeli. Ezt az eseményt általában olyan információk küldésére használják, amelyeket a felhasználó egy weblapon beírhatott a szerverre további feldolgozás céljából, például bejelentkezési adatok, űrlapadatok stb. Az információk elküldése történhet GET vagy POST kéréssel.

Az AngularJS tartalmaz egy ng-submind nevű irányelvet is, amely felhasználható az alkalmazás és a böngésző beküldési eseményéhez való kötésére. Tehát az AngularJS esetében a beküldési eseményen végezhet némi feldolgozást magában a vezérlőben, majd megjelenítheti a feldolgozott információkat a felhasználó számára.

Vegyünk egy példát arra, hogyan érhetjük el ezt.

Beküldési posztunkban

Bemutatunk egy szövegdobozt a felhasználó számára, amelyben megadhatja a megtanulni kívánt témát. Az oldalon lesz egy küldés gombra, amelyet megnyomva a téma egy rendezetlen listához kerül.

Event Registration

Guru99 Global Event

   Enter which topic you would like to learn
   
  • {{topicname}}

Kód Magyarázat:

  1. Először deklaráljuk az űrlap HTML címkénket, amely megtartja a "szövegmező" és a "Küldés gomb" vezérlést. Ezután az ng-submit direktívát használjuk arra, hogy a "Display ()" függvényt az űrlapunkhoz kössük. Ezt a függvényt a vezérlőnk határozza meg, és az űrlap benyújtásakor hívja meg.
  2. Van egy szöveges vezérlésünk, amelyben a felhasználó beírja a megtanulni kívánt témát. Ez egy „Topic” nevű változóhoz lesz kötve, amelyet a vezérlőnk használ.
  3. Van egy normál beküldés gombra, amelyre a felhasználó kattint, amikor beírta a kívánt témát.
  4. Az ng-repeat direktívát használtuk a felhasználó által beírt témák listájának megjelenítésére. Az ng-repeat direktíva végigveszi az 'AllTopic' tömb minden témáját, és ennek megfelelően megjeleníti a téma nevét.
  5. A vezérlőnkben deklarálunk egy "AllTopic" nevű tömb változót. Ez a felhasználó által a 2. lépésben megadott összes téma tárolására szolgál.
  6. Meghatározzuk a Display () függvény kódját, amelyet akkor hívunk meg, amikor a felhasználó rákattint a Küldés gombra. Itt használjuk a push tömb funkciót, hogy a felhasználó által a „Téma” változón keresztül beírt témákat hozzáadjuk az „AllTopic” tömbhöz.

A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.

Kimenet:

A kód működésének megtekintéséhez először írja be a témakör nevét, például "AngularJS", amint az fent látható a szövegmezőben, majd kattintson a Küldés gombra.

  • A beküldés gombra kattintás után a szövegmezőbe beírt elem hozzáadódik az elemek listájához.
  • Ezt a Display () funkcióval érik el, amelyet a küldés gomb megnyomásakor hívnak meg.
  • A Display () függvény hozzáadja a szöveget az "AllTopic" nevű tömbváltozóhoz. Az ng-repeat irányelvünk átmegy az „AllTopic” tömbváltozó minden egyes értékén, és ennek megfelelően listaként jeleníti meg őket.

Összegzés

Az "ng-submit" direktíva a felhasználó által az űrlap benyújtásakor megadott input feldolgozására szolgál.