AngularJS veidlapas iesniegšana ar piemēru (ng-submit)

Anonim

Kā iesniegt veidlapu, izmantojot ng-submit

Informācijas iesniegšanu tīmekļa vietnē parasti veic iesniegšanas notikums tīmekļa pārlūkprogrammā. Šis notikums parasti tiek izmantots, lai nosūtītu serverim informāciju, kuru, iespējams, ir ievadījusi tīmekļa lapa, piemēram, pieteikšanās akreditācijas datus, veidlapas datus utt. Informāciju var iesniegt, izmantojot GET vai POST pieprasījumu.

AngularJS nodrošina arī direktīvu ar nosaukumu ng-submit, kuru var izmantot, lai saistītu lietojumprogrammu ar pārlūka iesniegšanas notikumu. Tātad AngularJS gadījumā iesniegšanas pasākumā jūs varat veikt kādu apstrādi pašā kontrolierī un pēc tam apstrādāto informāciju parādīt lietotājam.

Ņemsim piemēru, kā mēs to varam sasniegt.

Mūsu iesniegšanas ziņojuma piemērā

Mēs iepazīstināsim lietotāju ar tekstlodziņu, kurā viņš var ievadīt tēmu, kuru viņi vēlas iemācīties. Lapā būs poga Iesniegt, kas, nospiežot, pievienos tēmu nesakārtotam sarakstam.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Koda skaidrojums:

  1. Vispirms mēs paziņojam par veidlapas HTML tagu, kurā tiks turētas vadīklas “tekstlodziņš” un “Iesniegt poga”. Pēc tam mēs izmantojam direktīvu ng-submit, lai saistītu funkciju "Display ()" ar mūsu veidlapu. Šī funkcija tiks definēta mūsu kontrolierī un tiks izsaukta, kad tiks iesniegta veidlapa.
  2. Mums ir teksta vadība, kurā lietotājs ievadīs tēmu, kuru vēlas iemācīties. Tas būs saistīts ar mainīgo ar nosaukumu “Topic”, kas tiks izmantots mūsu kontrolierī.
  3. Ir parastā iesniegšanas poga, uz kuras lietotājs noklikšķinās, kad būs ievadījis vēlamo tēmu.
  4. Mēs izmantojām direktīvu ng-repeat, lai parādītu lietotāja ievadīto tēmu saraksta vienumus. Direktīva ng-repeat iet cauri katrai masīva “AllTopic” tēmai un attiecīgi parāda tēmas nosaukumu.
  5. Mūsu kontrolierī mēs deklarējam masīva mainīgo ar nosaukumu “AllTopic”. Tas tiks izmantots, lai turētu visas tēmas, kuras lietotājs ievadījis 2. solī.
  6. Mēs definējam savas funkcijas Display () kodu, kas tiks izsaukts ikreiz, kad lietotājs noklikšķinās uz pogas Iesniegt. Šeit mēs izmantojam push masīva funkciju, lai pievienotu tēmas, kuras lietotājs ievadījis, izmantojot mainīgo “Topic”, mūsu masīvā “AllTopic”.

Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

Izeja:

Lai redzētu, kā kods darbojas, vispirms tekstlodziņā ievadiet tēmas nosaukumu, piemēram, "AngularJS", un pēc tam noklikšķiniet uz pogas Iesniegt.

  • Pēc noklikšķināšanas uz pogas Iesniegt jūs redzēsiet vienumu, kas tika ievadīts tekstlodziņā, pievienots vienumu sarakstam.
  • To panāk ar funkciju Display (), kas tiek izsaukta, nospiežot pogu Iesniegt.
  • Funkcija Display () pievieno tekstu masīva mainīgajam ar nosaukumu “AllTopic”. Un mūsu ng-repeat direktīva iziet katru vērtību masīva mainīgajā “AllTopic” un attiecīgi parāda tos kā saraksta vienumus.

Kopsavilkums

Direktīva "ng-submit" tiek izmantota, lai apstrādātu ievadīto informāciju, kuru ievadījis lietotājs, iesniedzot veidlapu.