AngularJS Form Submit cu Exemplu (ng-submit)

Cum să trimiteți un formular folosind ng-submit

Procesele de trimitere a informațiilor pe o pagină web sunt gestionate în mod normal de evenimentul de trimitere din browserul web. Acest eveniment este utilizat în mod normal pentru a trimite către server informații pe care utilizatorul le-ar fi putut introduce pe o pagină web pentru procesare ulterioară, cum ar fi acreditări de conectare, date de formular, etc. Trimiterea informațiilor se poate face prin cererea GET sau POST.

AngularJS oferă, de asemenea, o directivă numită ng-submit, care poate fi utilizată pentru a lega aplicația de evenimentul de trimitere al browserului. Deci, în cazul AngularJS, la evenimentul de trimitere puteți efectua unele prelucrări în cadrul controlerului în sine și apoi puteți afișa informațiile procesate utilizatorului.

Să luăm un exemplu despre cum putem realiza acest lucru.

În exemplul nostru de trimitere,

Vom prezenta utilizatorului o casetă text în care acesta poate introduce subiectul pe care dorește să îl învețe. Va fi un buton de trimitere pe pagină, care, atunci când este apăsat, va adăuga subiectul la o listă neordonată.

Guru99 Global Event
   Enter which topic you would like to learn
   

{{topicname}}

Explicatie cod:

1. Mai întâi declarăm eticheta HTML a formularului, care va ține controlul „caseta de text” și „butonul de trimitere”. Folosim apoi directiva ng-submit pentru a lega funcția „Display ()” de formularul nostru. Această funcție va fi definită în controlerul nostru și va fi apelată la trimiterea formularului.
2. Avem un control text în care utilizatorul va introduce subiectul pe care dorește să îl învețe. Aceasta va fi legată de o variabilă numită „Subiect” care va fi utilizată în controlerul nostru.
3. Există butonul de trimitere normal pe care utilizatorul va face clic atunci când a introdus subiectul dorit.
4. Am folosit directiva ng-repeat pentru a afișa elementele de listă ale subiectelor pe care le introduce utilizatorul. Directiva ng-repeat trece prin fiecare subiect din matricea „AllTopic” și afișează numele subiectului în consecință.
5. În controlerul nostru, declarăm o variabilă matrice numită „AllTopic”. Aceasta va fi utilizată pentru a reține toate subiectele introduse de utilizator în Pasul 2.
6. Definim codul pentru funcția noastră Display (), care va fi apelat ori de câte ori utilizatorul face clic pe butonul Trimite. Aici folosim funcția push array pentru a adăuga subiectele introduse de utilizator prin variabila „Topic” în matricea noastră „AllTopic”.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.

Ieșire:

Pentru a vedea cum funcționează codul, mai întâi introduceți un nume de subiect precum „AngularJS” așa cum se arată mai sus în caseta de text și apoi faceți clic pe butonul Trimiteți.

• După ce se face clic pe butonul Trimitere, veți vedea elementul care a fost introdus în caseta de text adăugat la lista de articole.
• Acest lucru se realizează prin funcția Display (), care este apelată la apăsarea butonului de trimitere.
• Funcția Display () adaugă textul la variabila matrice numită „AllTopic”. Și directiva noastră ng-repeat trece prin fiecare valoare din variabila matricei „AllTopic” și le afișează ca elemente de listă în consecință.

rezumat

Directiva „ng-submit” este utilizată pentru a procesa datele introduse de utilizator atunci când formularul este trimis.