AngularJS Form Send med eksempel (ng-send)

Anonim

Hvordan sende inn et skjema ved hjelp av ng-send

Prosessene for å sende inn informasjon på en webside håndteres vanligvis av innsendingshendelsen i nettleseren. Denne hendelsen brukes vanligvis til å sende informasjon som brukeren kan ha skrevet inn på en webside til serveren for videre behandling, som påloggingsinformasjon, skjemadata, etc. Innlevering av informasjon kan gjøres via GET eller POST-forespørsel.

AngularJS gir også et direktiv kalt ng-submit som kan brukes til å binde søknaden til innsendingshendelsen i nettleseren. Så når det gjelder AngularJS, kan du på innleveringshendelsen utføre litt behandling i selve kontrolleren og deretter vise den behandlede informasjonen til brukeren.

La oss ta et eksempel på hvordan vi kan oppnå dette.

I eksempelet vårt om innlegg,

Vi skal presentere en tekstboks for brukeren der de kan legge inn emnet de vil lære. Det vil være en send-knapp på siden, som når du trykker på den vil legge emnet til en ikke-ordnet liste.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Kode Forklaring:

  1. Vi erklærer først skjemaet vårt HTML-tag, som holder "tekstboksen" og "send inn-knappen" kontrollen. Vi bruker da ng-submit-direktivet for å binde funksjonen "Display ()" til skjemaet vårt. Denne funksjonen vil bli definert i kontrolleren vår og vil ringes opp når skjemaet sendes inn.
  2. Vi har en tekstkontroll der brukeren vil gå inn i emnet de vil lære. Dette vil være bundet til en variabel kalt 'Emne' som vil bli brukt i kontrolleren vår.
  3. Det er den vanlige sendeknappen som brukeren klikker på når de har angitt emnet de ønsker.
  4. Vi har brukt ng-repeat-direktivet for å vise listeelementer over emnene brukeren skriver inn. Direktivet om repetering av ng går gjennom hvert emne i matrisen 'AllTopic' og viser emnets navn deretter.
  5. I kontrolleren vår erklærer vi en matrisevariabel kalt 'AllTopic'. Dette vil bli brukt til å holde alle emnene som er skrevet inn av brukeren i trinn 2.
  6. Vi definerer koden for vår Display () -funksjon som skal ringes når brukeren klikker på Send-knappen. Her bruker vi push array-funksjonen for å legge til emnene som er angitt av brukeren via variabelen "Topic" i vår array "AllTopic."

Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.

Produksjon:

For å se koden som fungerer, må du først skrive inn et emnenavn som "AngularJS" som vist ovenfor i tekstboksen og deretter klikke på Send-knappen.

  • Etter at du har klikket på send-knappen, vil du se elementet som ble lagt inn i tekstboksen lagt til listen over elementene.
  • Dette oppnås med Display () -funksjonen, som kalles når du sender inn knappen.
  • Display () -funksjonen legger til teksten i matrixvariabelen kalt 'AllTopic'. Og vårt ng-repeat-direktiv går gjennom hver verdi i arrayvariabelen 'AllTopic' og viser dem som listeelementer tilsvarende.

Sammendrag

Direktivet "ng-send" brukes til å behandle inputene som er skrevet inn av brukeren når skjemaet sendes inn.