AngularJS Form Submit with Example (ng-submit)

Anonim

Lomakkeen lähettäminen ng-submit-toiminnolla

Verkkosivun tietojen lähettämisprosessit hoidetaan yleensä verkkoselaimen lähetystapahtumassa. Tätä tapahtumaa käytetään yleensä lähettämään tietoja, jotka käyttäjä on mahdollisesti kirjoittanut verkkosivulle, palvelimelle jatkokäsittelyä varten, kuten kirjautumistiedot, lomaketiedot jne. Tietojen lähettäminen voidaan tehdä GET- tai POST-pyynnön kautta.

AngularJS tarjoaa myös direktiivin nimeltä ng-submit, jota voidaan käyttää sovelluksen sitomiseen selaimen lähetystapahtumaan. Joten AngularJS: n tapauksessa lähetystapahtumassa voit suorittaa jonkin prosessorin itse ohjaimessa ja näyttää sitten käsitellyt tiedot käyttäjälle.

Otetaan esimerkki siitä, miten voimme saavuttaa tämän.

Lähetä lähetysesimerkissämme

Esitämme käyttäjälle tekstiruudun, johon hän voi kirjoittaa oppimansa aiheen. Sivulla on lähetyspainike, joka painettuna lisää aiheen järjestämättömään luetteloon.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Koodin selitys:

  1. Ilmoitamme ensin HTML-koodilomakkeemme, joka pitää "tekstikentän" ja "Lähetä painike" hallinnan. Sitten sitomme funktion "Display ()" lomakkeeseemme ng-submit-käskyn avulla. Tämä toiminto määritetään ohjaimessamme ja sitä kutsutaan, kun lomake lähetetään.
  2. Meillä on tekstin hallinta, jossa käyttäjä kirjoittaa aiheen, jonka hän haluaa oppia. Tämä on sidottu muuttujaan nimeltä 'Aihe', jota käytetään ohjaimessamme.
  3. On normaali lähetyspainike, jota käyttäjä napsauttaa, kun hän on kirjoittanut haluamasi aiheen.
  4. Olemme käyttäneet ng-repeat-direktiiviä näyttämään luettelon kohteet käyttäjän kirjoittamista aiheista. Ng-repeat-direktiivi käy läpi kaikki aiheet taulukossa 'AllTopic' ja näyttää aiheen nimen vastaavasti.
  5. Ohjaimessamme julistamme matriisimuuttujan nimeltä AllTopic. Tätä käytetään pitämään kaikki käyttäjän vaiheessa 2 kirjoittamat aiheet.
  6. Määritämme Display () -toiminnon koodin, jota kutsutaan aina, kun käyttäjä napsauttaa Lähetä-painiketta. Täällä käytämme push-array-toimintoa lisätäksesi aiheet, jotka käyttäjä on syöttänyt muuttujan "Topic" kautta "AllTopic" -taulukkoomme.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.

Tuotos:

Jos haluat nähdä koodin toimivan, kirjoita ensin aiheen nimi, kuten "AngularJS", kuten yllä on esitetty tekstikentässä, ja napsauta sitten Lähetä-painiketta.

  • Kun lähetyspainiketta on napsautettu, tekstikenttään syötetty kohde lisätään kohteiden luetteloon.
  • Tämä saavutetaan Display () -toiminnolla, joka kutsutaan, kun lähetyspainiketta painetaan.
  • Display () -toiminto lisää tekstin AllTopic-nimiseen taulukon muuttujaan. Ja ng-repeat -direktiivi käy läpi kaikki arvot taulukon muuttujassa 'AllTopic' ja näyttää ne luettelokohteina vastaavasti.

Yhteenveto

"Ng-submit" -direktiiviä käytetään käyttäjän syöttämän syötteen käsittelyyn lomakkeen lähettämisen yhteydessä.