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
Kód Magyarázat:
- 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.
- 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.
- Van egy normál beküldés gombra, amelyre a felhasználó kattint, amikor beírta a kívánt témát.
- 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.
- 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.
- 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.