Slanje obrasca AngularJS s primjerom (ng-submit)

Anonim

Kako poslati obrazac pomoću ng-submit

Procesima slanja podataka na web stranici obično upravlja događaj slanja u web pregledniku. Ovaj se događaj obično koristi za slanje podataka koje je korisnik mogao unijeti na web stranicu na poslužitelj za daljnju obradu poput vjerodajnica za prijavu, podataka obrasca itd. Podnošenje podataka može se izvršiti putem zahtjeva GET ili POST.

AngularJS također nudi direktivu zvanu ng-submit koja se može koristiti za povezivanje aplikacije s događajem submit preglednika. Dakle, u slučaju AngularJS, na događaju slanja možete izvršiti određenu obradu unutar samog kontrolera, a zatim prikazati obrađene podatke korisniku.

Uzmimo primjer kako to možemo postići.

U našem primjeru za prijavu,

Korisniku ćemo predstaviti okvir za tekst u kojem može unijeti temu koju želi naučiti. Na stranici će se nalaziti gumb za slanje, koji će pritiskom dodati temu na nesređeni popis.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Objašnjenje koda:

  1. Prvo prijavljujemo HTML oznaku obrasca koja će sadržavati kontrolu "okvir za tekst" i "gumb za slanje". Zatim koristimo direktivu ng-submit za vezanje funkcije "Display ()" na naš obrazac. Ova će funkcija biti definirana u našem upravljaču i pozvat će se kad se obrazac preda.
  2. Imamo kontrolu teksta u kojoj će korisnik unijeti temu koju želi naučiti. To će biti vezano za varijablu koja se naziva 'Tema' koja će se koristiti u našem kontroleru.
  3. Postoji uobičajeni gumb za slanje koji će korisnik kliknuti kad uđe u temu koju želi.
  4. Upotrijebili smo direktivu ng-repeat za prikaz stavki popisa tema koje korisnik unosi. Direktiva ng-repeat prolazi kroz svaku temu u polju 'AllTopic' i prikazuje naziv teme u skladu s tim.
  5. U našem kontroleru deklariramo varijablu niza koja se naziva "AllTopic". Ovo će se koristiti za zadržavanje svih tema koje je korisnik unio u 2. koraku.
  6. Definiramo kôd za našu funkciju Display () koja će se pozvati svaki put kada korisnik klikne gumb Pošalji. Ovdje koristimo funkciju push niza za dodavanje tema koje je korisnik unio putem varijable 'Topic' u naš niz 'AllTopic'.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.

Izlaz:

Da biste vidjeli kako kôd djeluje, prvo unesite naziv teme poput "AngularJS" kao što je prikazano gore u tekstualni okvir, a zatim kliknite gumb Pošalji.

  • Nakon što se klikne gumb za slanje, vidjet ćete stavku koja je unesena u okvir za tekst dodan na popis stavki.
  • To se postiže funkcijom Display () koja se poziva kada se pritisne gumb za slanje.
  • Funkcija Display () dodaje tekst u varijablu niza nazvanu "AllTopic". A naša direktiva ng-repeat prolazi kroz svaku vrijednost u varijabli polja 'AllTopic' i prikazuje ih kao stavke popisa u skladu s tim.

Sažetak

Direktiva "ng-submit" koristi se za obradu unosa koji je korisnik unio prilikom slanja obrasca.