Oddaja obrazca AngularJS s primerom (ng-submit)

Anonim

Kako oddati obrazec s pomočjo ng-submit

Postopke pošiljanja informacij na spletni strani običajno obravnava dogodek oddaje v spletnem brskalniku. Ta dogodek se običajno uporablja za pošiljanje informacij, ki jih je uporabnik morda vnesel na spletno stran, strežniku za nadaljnjo obdelavo, kot so poverilnice za prijavo, podatki obrazcev itd. Predložitev informacij je možna z zahtevo GET ali POST.

AngularJS ponuja tudi direktivo, imenovano ng-submit, ki se lahko uporablja za vezavo aplikacije na dogodek oddaje brskalnika. V primeru AngularJS lahko v primeru oddaje izvedete nekaj obdelave znotraj samega krmilnika in nato obdelane informacije prikažete uporabniku.

Vzemimo primer, kako lahko to dosežemo.

V našem primeru pošiljanja prispevkov

Uporabniku bomo predstavili polje z besedilom, v katerem lahko vnese temo, ki se jo želi naučiti. Na strani bo gumb za oddajo, ki bo ob pritisku dodal temo na neurejen seznam.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Razlaga kode:

  1. Najprej prijavimo našo HTML oznako obrazca, ki bo vsebovala kontrolnik »besedilno polje« in »gumb za oddajo«. Nato z direktivo ng-submit povežemo funkcijo "Display ()" na naš obrazec. Ta funkcija bo določena v našem krmilniku in jo bo poklicala, ko bo obrazec oddan.
  2. Imamo nadzor besedila, v katerem bo uporabnik vnesel temo, ki se jo želi naučiti. To bo vezano na spremenljivko, imenovano "Tema", ki bo uporabljena v našem krmilniku.
  3. Obstaja običajni gumb za oddajo, ki ga bo uporabnik kliknil, ko bo vnesel želeno temo.
  4. Za prikaz elementov seznama tem, ki jih uporabnik vnese, smo uporabili direktivo ng-repeat. Direktiva ng-repeat gre skozi vsako temo v polju 'AllTopic' in temu prikaže ime teme.
  5. V našem krmilniku prijavljamo spremenljivko polja, imenovano »AllTopic«. S tem bodo shranjene vse teme, ki jih je uporabnik vnesel v 2. koraku.
  6. Določamo kodo za funkcijo Display (), ki bo poklicana vsakič, ko uporabnik klikne gumb Pošlji. Tukaj uporabljamo funkcijo potisnega polja, da dodamo teme, ki jih je uporabnik vnesel s spremenljivko »Tema«, v našo matriko »AllTopic«.

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Če želite videti, da koda deluje, najprej v besedilno polje vnesite ime teme, kot je "AngularJS", kot je prikazano zgoraj, in nato kliknite gumb Pošlji.

  • Ko kliknete gumb za oddajo, boste videli element, ki ste ga vnesli v polje z besedilom, dodano na seznam elementov.
  • To doseže funkcija Display (), ki se pokliče s pritiskom na gumb za oddajo.
  • Funkcija Display () doda besedilo spremenljivki polja, imenovani »AllTopic«. In naša direktiva ng-repeat gre skozi vsako vrednost v spremenljivki polja »AllTopic« in jih ustrezno prikaže kot elemente seznama.

Povzetek

Direktiva "ng-submit" se uporablja za obdelavo vnosa, ki ga vnese uporabnik ob oddaji obrazca.