AngularJS ng-submit lomakkeen lähetysesimerkillä
James Hartman
AngularJS ng-submit -direktiivi
- ng-submit AngularJS:n direktiiviä käytetään sitomaan sovellus selaimen lähetystapahtumaan. Joten tapauksessa angularjs lähetystapahtumassa voit suorittaa jonkin verran käsittelyä itse rekisterinpitäjässä ja näyttää sitten käsitellyt tiedot käyttäjälle.
Lomakkeen lähettäminen AngularJS:ssä ng-submitilla
Tietojen lähetysprosessit verkkosivulla käsitellään tavallisesti verkkoselaimen lähetystapahtumassa. Tätä tapahtumaa käytetään tavallisesti lähettämään palvelimelle tietoja, jotka käyttäjä on saattanut syöttää verkkosivulle, kuten kirjautumistiedot, lomaketiedot jne. jatkokäsittelyä varten. Tietojen lähettäminen voidaan tehdä GET- tai POST-pyynnön kautta.
Otetaan esimerkki Angular-lomakkeen lähetyksestä nähdäksesi, kuinka lomakkeita lähetetään AngularJS:ssä.
AngularJS-lomakkeen lähetysesimerkissä aiomme esittää käyttäjälle tekstilaatikon, johon hän voi kirjoittaa aiheen, jonka hän haluaa oppia. Sivulle tulee lähetyspainike, jota painettaessa aihe lisätään järjestämättömälle listalle.
Esimerkki AngularJS-lomakkeen lähetyksestä
Nyt näemme esimerkin AngularJS-lomakkeen lähettämisestä rekisterinpitäjältä ng-submit-ohjeen avulla:
<!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>
Koodin selitys:
- Ilmoitamme ensin lomakkeemme HTML-tunnisteen, joka sisältää "tekstiruudun" ja "lähetä-painikkeen"-säätimen, kuten kulmalomakkeen lähetystapahtumaesimerkissä näkyy. Käytämme sitten ngsubmit Angular -direktiiviä funktion "Display()" sitomiseen muotoomme. Tämä toiminto määritetään rekisterinpitäjässämme ja sitä kutsutaan, kun lomake lähetetään.
- Meillä on tekstiohjaus, johon käyttäjä kirjoittaa aiheen, jonka hän haluaa oppia. Tämä sidotaan muuttujaan nimeltä "Topic", jota käytetään ohjaimessamme.
- AngularJS:ssä on normaali lähetyspainike, jota käyttäjä napsauttaa, kun hän on kirjoittanut haluamansa aiheen.
- Olemme käyttäneet ng-toista -ohje, joka näyttää käyttäjän syöttämien aiheiden luettelokohteet. ng-repeat-käsky käy läpi jokaisen aiheen taulukossa "AllTopic" ja näyttää aiheen nimen vastaavasti.
- Ohjaimessamme määritetään taulukkomuuttuja nimeltä "AllTopic". Tätä käytetään pitämään kaikki käyttäjän vaiheessa 2 kirjoittamat aiheet.
- Määrittelemme koodia Display()-funktiollemme, jota kutsutaan aina, kun käyttäjä napsauttaa Lähetä-painiketta. Täällä käytämme push array -toimintoa lisätäksemme aiheet, jotka käyttäjä on syöttänyt muuttujan "Topic" kautta taulukkoomme "AllTopic".
Jos AngularJS-lomakkeen esimerkkikoodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodisi selaimessa.
lähtö:
Nähdäksesi koodin toimivan, kirjoita ensin aiheen nimi, kuten "Angular", kuten yllä näkyy tekstikentässä, ja napsauta sitten Lähetä-painiketta.
- Kun lähetä-painiketta on napsautettu, näet tekstikenttään syötetyn kohteen lisättynä kohdeluetteloon.
- Tämä saavutetaan Display()-funktiolla, jota kutsutaan, kun lähetyspainiketta painetaan.
- Display()-funktio lisää tekstin taulukkomuuttujaan nimeltä "AllTopic". Ja ng-repeat -direktiivimme käy läpi jokaisen taulukon muuttujan 'AllTopic' arvon ja näyttää ne luettelokohteina vastaavasti.
Yhteenveto
- "ng-submit" -käskyä käytetään käyttäjän syöttämän syötteen käsittelemiseen AngularJS:n lomakkeen lähetykseen.
- Tietojen lähetysprosessit verkkosivulla käsitellään tavallisesti verkkoselaimen lähetystapahtumassa.
- Tietojen toimittaminen voidaan tehdä GET- tai POST-pyynnön kautta.
- Display()-funktio lisää tekstin taulukkomuuttujaan nimeltä "AllTopic".
