AngularJS odoslanie formulára s príkladom (ng-odoslanie)

Anonim

Ako odoslať formulár pomocou nástroja ng-submit

Procesy odosielania informácií na webovej stránke sa zvyčajne riešia pomocou udalosti odoslania vo webovom prehliadači. Táto udalosť sa zvyčajne používa na zasielanie informácií, ktoré mohol používateľ zadať na webovej stránke, na server na ďalšie spracovanie, ako sú prihlasovacie údaje, údaje formulárov atď. Informácie je možné odoslať prostredníctvom žiadosti GET alebo POST.

AngularJS tiež poskytuje smernicu nazvanú ng-submit, pomocou ktorej je možné aplikáciu naviazať na udalosť odoslania v prehliadači. Takže v prípade AngularJS môžete na udalosti odovzdania vykonať nejaké spracovanie v samotnom radiči a potom zobraziť spracované informácie používateľovi.

Uveďme si príklad, ako to môžeme dosiahnuť.

V našom príklade predloženia príspevku

Používateľovi predstavíme textové pole, v ktorom môže zadať tému, ktorú sa chce naučiť. Na stránke bude tlačidlo na odoslanie, ktoré po stlačení pridá tému do nezoradeného zoznamu.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Vysvetlenie kódu:

  1. Najprv deklarujeme našu značku HTML, ktorá bude obsahovať ovládací prvok „textové pole“ a „tlačidlo odoslať“. Potom použijeme direktívu ng-submit na naviazanie funkcie "Display ()" na náš formulár. Táto funkcia bude definovaná v našom kontrolóri a bude vyvolaná pri odoslaní formulára.
  2. Máme textový ovládací prvok, v ktorom používateľ zadá tému, ktorú sa chce naučiť. Bude to viazané na premennú nazvanú „Téma“, ktorá sa použije v našom ovládači.
  3. Existuje normálne tlačidlo na odoslanie, na ktoré užívateľ klikne, keď zadá požadovanú tému.
  4. Na zobrazenie položiek zoznamu tém, ktoré užívateľ zadá, sme použili direktívu ng-repeat. Direktíva ng-repeat prechádza každou témou v poli 'AllTopic' a podľa toho zobrazuje názov témy.
  5. V našom radiči deklarujeme premennú poľa s názvom „AllTopic“. Toto sa použije na zadržanie všetkých tém zadaných používateľom v kroku 2.
  6. Definujeme kód pre našu funkciu Display (), ktorý sa bude volať vždy, keď používateľ klikne na tlačidlo Odoslať. Tu používame funkciu push array na pridanie tém zadaných používateľom prostredníctvom premennej „Téma“ do nášho poľa „AllTopic“.

Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

Výkon:

Ak chcete, aby kód fungoval, najskôr do textového poľa zadajte názov témy, napríklad „AngularJS“, ako je uvedené vyššie, a potom kliknite na tlačidlo Odoslať.

  • Po kliknutí na tlačidlo odoslať sa zobrazí položka, ktorá bola zadaná do textového poľa, pridaná do zoznamu položiek.
  • Toho sa dosahuje pomocou funkcie Display (), ktorá sa vyvolá po stlačení tlačidla odoslania.
  • Funkcia Display () pridá text do premennej poľa s názvom „AllTopic“. A naša direktíva ng-repeat prechádza každou hodnotou v premennej poľa „AllTopic“ a zobrazuje ich ako položky zoznamu.

Zhrnutie

Smernica „ng-submit“ sa používa na spracovanie vstupu zadaného používateľom pri odoslaní formulára.