AngularJS ng-submit cu exemplu de trimitere formular
James Hartman
Directiva AngularJS ng-submit
ng-submit directiva din AngularJS este folosită pentru a lega aplicația la evenimentul de trimitere al browserului. Deci în cazul AngularJS la evenimentul de trimitere, puteți efectua o anumită prelucrare în cadrul controlorului însuși și apoi puteți afișa informațiile prelucrate utilizatorului.
Cum să trimiteți un formular în AngularJS folosind ng-submit
Procesele de trimitere a informațiilor pe o pagină web sunt în mod normal gestionate de evenimentul de trimitere din browserul web. Acest eveniment este utilizat în mod normal pentru a trimite informații pe care utilizatorul le-ar fi putut introduce pe o pagină web către server pentru procesare ulterioară, cum ar fi acreditările de conectare, datele din formular etc. Trimiterea informațiilor se poate face prin cererea GET sau POST.
Să luăm un exemplu de trimitere a formularelor Angular pentru a vedea cum să trimiteți formulare în AngularJS.
În exemplul nostru de trimitere a formularului AngularJS, vom prezenta utilizatorului o casetă de text în care acesta poate introduce subiectul pe care vrea să îl învețe. Pe pagină va exista un buton de trimitere, care, atunci când este apăsat, va adăuga subiectul într-o listă neordonată.
Exemplu de trimitere formular AngularJS
Acum, vom vedea un exemplu de trimitere a formularului AngularJS de la Controller folosind directiva ng-submit:
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form ng-submit="Display()">
Enter which topic you would like to learn
<input type="text" ng-app="sampleApp" ng-model="Topic"><br>
<input type="submit" value="Submit"/>
<ul ng-repeat="topicname in AllTopic">
<li>{{topicname}}</li>
</ul>
</form>
</div>
<script>
var sampleApp = angular.module("sampleApp",[]);
sampleApp.controller("AngularController",function($scope) {
$scope.AllTopic=[];
$scope.Display = function () {
$scope.AllTopic.push($scope.Topic);
}
});
</script>
</body>
</html>
Explicația codului:
- Mai întâi declarăm eticheta HTML a formularului, care va deține controlul „caseta text” și „butonul de trimitere”, așa cum se arată în exemplul de eveniment de trimitere a formularului Angular. Apoi folosim directiva ngsubmit Angular pentru a lega funcția „Display()” la formularul nostru. Această funcție va fi definită în controlerul nostru și va fi apelată la trimiterea formularului.
- Avem un control text în care utilizatorul va introduce subiectul pe care vrea să-l învețe. Aceasta va fi legată de o variabilă numită „Subiect” care va fi folosită în controlerul nostru.
- Există butonul normal de trimitere în AngularJS pe care utilizatorul îl va face clic când a intrat în subiectul dorit.
- Am folosit ng-repetă directivă pentru a afișa elementele din listă cu subiectele introduse de utilizator. Directiva ng-repeat trece prin fiecare subiect din matricea „AllTopic” și afișează numele subiectului în consecință.
- În controlerul nostru, declarăm o variabilă matrice numită „AllTopic”. Acesta va fi folosit pentru a păstra toate subiectele introduse de utilizator în Pasul 2.
- Definim codul pentru funcția noastră Display(), care va fi apelat ori de câte ori utilizatorul face clic pe butonul Trimitere. Aici folosim funcția push array pentru a adăuga subiectele introduse de utilizator prin variabila „Subiect” în tabloul nostru „AllTopic”.
Dacă exemplul de cod de formular AngularJS este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.
ieșire:
Pentru a vedea codul funcționează, mai întâi, introduceți un nume de subiect precum „Angular”, așa cum se arată mai sus în caseta de text, apoi faceți clic pe butonul Trimitere.
- După ce se face clic pe butonul de trimitere, veți vedea articolul care a fost introdus în caseta de text adăugat la lista de articole.
- Acest lucru este realizat de funcția Display(), care este apelată atunci când este apăsat butonul de trimitere.
- Funcția Display() adaugă textul la variabila matrice numită „AllTopic”. Și directiva noastră ng-repeat trece prin fiecare valoare din variabila matrice „AllTopic” și le afișează ca elemente de listă în consecință.
Rezumat
- Directiva „ng-submit” este utilizată pentru a procesa intrarea introdusă de utilizator pentru trimiterea formularului în AngularJS.
- Procesele de trimitere a informațiilor pe o pagină web sunt în mod normal gestionate de evenimentul de trimitere din browserul web.
- Transmiterea informațiilor se poate face prin cerere GET sau POST.
- Funcția Display() adaugă textul la variabila matrice numită „AllTopic”.
