„AngularJS“ formos pateikimas su pavyzdžiu (ng-pateikti)

Kaip pateikti formą naudojant „ng-submit“

Informacijos pateikimo tinklalapyje procesus paprastai vykdo pateikimo įvykis žiniatinklio naršyklėje. Šis įvykis paprastai naudojamas siunčiant informaciją, kurią vartotojas gali būti įvedęs į tinklalapį, į serverį tolesniam apdorojimui, pvz., Prisijungimo duomenis, formos duomenis ir kt. Informaciją galima pateikti per GET arba POST užklausą.

„AngularJS“ taip pat pateikia direktyvą, pavadintą „ng-submit“, kuri gali būti naudojama programai susieti su naršyklės pateikimo įvykiu. Taigi „AngularJS“ atveju pateikimo įvykyje galite atlikti tam tikrą apdorojimą pačiame valdiklyje ir tada parodyti apdorotą informaciją vartotojui.

Paimkime pavyzdį, kaip mes galime tai pasiekti.

Mūsų pateikimo paštu pavyzdyje

Vartotojui pateiksime teksto laukelį, kuriame jis galės įvesti norimą išmokti temą. Puslapyje bus mygtukas „Pateikti“, kurį paspaudus tema bus įtraukta į nesutvarkytą sąrašą.

Guru99 Global Event
   Enter which topic you would like to learn
   

{{topicname}}

Kodo paaiškinimas:

1. Pirmiausia deklaruojame savo formos HTML žymą, kurioje bus valdomas „teksto laukelis“ ir „Pateikti mygtuką“ valdiklis. Tada naudojame „ng-pateikti“ direktyvą, kad susietume funkciją „Display ()“ su savo forma. Ši funkcija bus apibrėžta mūsų valdiklyje ir bus iškviesta pateikus formą.
2. Mes turime teksto valdiklį, kuriame vartotojas pateks į norimą išmokti temą. Tai bus susieta su kintamuoju, vadinamu „Tema“, kuris bus naudojamas mūsų valdiklyje.
3. Yra įprastas pateikimo mygtukas, kurį vartotojas spustelės įvedęs norimą temą.
4. Mes naudojome „ng-repeat“ direktyvą, kad būtų rodomi naudotojo įvestų temų sąrašo elementai. „Ng-repeat“ direktyva pereina kiekvieną masyvo „AllTopic“ temą ir atitinkamai parodo temos pavadinimą.
5. Valdiklyje skelbiame masyvo kintamąjį, vadinamą „AllTopic“. Tai bus naudojama laikyti visas temas, kurias vartotojas įvedė 2 žingsnyje.
6. Mes apibrėžiame savo funkcijos Display () kodą, kuris bus iškviestas vartotojui spustelėjus mygtuką Pateikti. Čia mes naudojame „push array“ funkciją, kad pridėtume temas, kurias vartotojas įrašė per kintamąjį „Topic“ į savo masyvą „AllTopic“.

Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.

Išvestis:

Norėdami pamatyti kodą, pirmiausia įveskite temos pavadinimą, pvz., „AngularJS“, kaip parodyta aukščiau teksto laukelyje, tada spustelėkite mygtuką Pateikti.

• Spustelėjus mygtuką „Pateikti“, pamatysite elementą, kuris buvo įvestas teksto laukelyje, pridėtą prie elementų sąrašo.
• Tai pasiekiama naudojant Display () funkciją, kuri iškviečiama paspaudus mygtuką „Pateikti“.
• Funkcija „Display“) prideda tekstą prie masyvo kintamojo, vadinamo „AllTopic“. Mūsų ng-pakartojimo direktyva pereina kiekvieną masyvo kintamojo „AllTopic“ reikšmę ir atitinkamai rodo jas kaip sąrašo elementus.

Santrauka

„Ng-pateikti“ direktyva naudojama apdorojant įvestį, kurią vartotojas įvedė pateikdamas formą.