NurgaJS vormi esitamine koos näitega (ng-esitada)

Anonim

Kuidas vormi esitada ng-submit abil

Veebilehel teabe esitamise protsessidega tegeleb tavaliselt veebibrauseris toimuv esitussündmus. Seda sündmust kasutatakse tavaliselt teabe, mille kasutaja võib olla veebilehele sisestanud, serverile edasiseks töötlemiseks, nagu sisselogimismandaadid, vormiandmed jne. Informatsiooni saab edastada GET- või POST-päringu kaudu.

AngularJS pakub ka direktiivi nimega ng-submit, mida saab kasutada rakenduse sidumiseks brauseri esitamise sündmusega. Nii et AngularJS-i puhul saate esitusüritusel teatud töötluse läbi viia kontrolleris ja seejärel kuvada töödeldud teave kasutajale.

Võtame näite, kuidas seda saavutada.

Meie postitamise näites

Esitame kasutajale tekstikasti, kuhu ta saab sisestada teema, mida nad õppida soovivad. Lehel on nuppu Esita, mis vajutamisel lisab teema järjestamata loendisse.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Koodi selgitus:

  1. Esmalt deklareerime oma vormi HTML-märgendi, mis hoiab kontrolli all tekstikasti ja nuppu Esita. Seejärel kasutame funktsiooni "Display ()" sidumiseks meie vormiga käsku ng-submit. See funktsioon määratletakse meie kontrolleris ja seda kutsutakse vormi esitamisel.
  2. Meil on tekstikontroll, milles kasutaja sisestab teema, mida ta soovib õppida. See on seotud muutujaga, mille nimi on „Teema” ja mida kasutatakse meie kontrolleris.
  3. Seal on tavaline nuppu Esita, mida kasutaja klõpsab, kui on sisestanud soovitud teema.
  4. Oleme kasutanud käsku ng-repeat kasutaja sisestatud teemade loendiüksuste kuvamiseks. Direktiiv ng-repeat läbib massiivi 'AllTopic' iga teema ja kuvab vastavalt sellele ka teema nime.
  5. Deklareerime oma kontrolleris massiivi muutuja nimega "AllTopic". Seda kasutatakse kõigi kasutaja 2. etapis sisestatud teemade hoidmiseks.
  6. Määratleme funktsiooni Display () koodi, mida kutsutakse alati, kui kasutaja klõpsab nuppu Esita. Siin kasutame tõukemassiivi funktsiooni, et lisada muutuja „Topic” kaudu kasutaja sisestatud teemad meie massiivi „AllTopic”.

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Koodi töötamise nägemiseks sisestage kõigepealt teema nimi, näiteks "AngularJS", nagu tekstikastis ülaltoodud, ja seejärel klõpsake nuppu Esita.

  • Kui nupul Esita on klõpsatud, näete üksust, mis sisestati tekstikasti üksuste loendisse.
  • See saavutatakse funktsiooni Display () abil, mida kutsutakse nupule Esitamine vajutades.
  • Funktsioon Display () lisab teksti massiivi muutujale nimega AllTopic. Ja meie ng-repeat direktiiv läbib massiivi muutuja "AllTopic" iga väärtuse ja kuvab need vastavalt loendiüksustena.

Kokkuvõte

"Ng-submit" käsku kasutatakse vormi esitamisel kasutaja sisestatud sisendi töötlemiseks.