AngularJS-formular indsend med eksempel (ng-indsend)

Anonim

Sådan indsendes en formular ved hjælp af ng-send

Processerne med at indsende information på en webside håndteres normalt af indsendelseshændelsen i webbrowseren. Denne begivenhed bruges normalt til at sende oplysninger, som brugeren muligvis har indtastet på en webside til serveren til videre behandling som loginoplysninger, formulardata osv. Indsendelse af oplysninger kan ske via GET- eller POST-anmodning.

AngularJS leverer også et direktiv kaldet ng-submit, som kan bruges til at binde applikationen til browserens indsendelseshændelse. Så i tilfælde af AngularJS kan du ved indsendelseshændelsen udføre en vis behandling i selve controlleren og derefter vise de behandlede oplysninger til brugeren.

Lad os tage et eksempel på, hvordan vi kan opnå dette.

I vores eksempel på indsendelsespost,

Vi vil præsentere en tekstboks til brugeren, hvor de kan indtaste det emne, som de vil lære. Der vil være en indsendeknap på siden, som når den trykkes vil tilføje 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 vores formular-HTML-tag, som indeholder "tekstfeltet" og "send-knappen" -kontrollen. Vi bruger derefter ng-send-direktivet til at binde funktionen "Display ()" til vores formular. Denne funktion defineres i vores controller og kaldes, når formularen sendes.
  2. Vi har en tekstkontrol, hvor brugeren indtaster det emne, de vil lære. Dette vil være bundet til en variabel kaldet 'Emne', som vil blive brugt i vores controller.
  3. Der er den normale sendeknap, som brugeren klikker på, når de har indtastet det emne, de ønsker.
  4. Vi har brugt ng-repeat-direktivet til at vise listeelementer over de emner, som brugeren indtaster. Direktivet om ng-gentagelse gennemgår hvert emne i matrixen 'AllTopic' og viser emnets navn i overensstemmelse hermed.
  5. I vores controller erklærer vi en matrixvariabel kaldet 'AllTopic'. Dette vil blive brugt til at indeholde alle de emner, der er indtastet af brugeren i trin 2.
  6. Vi definerer koden til vores Display () -funktion, som kaldes, når brugeren klikker på knappen Send. Herovre bruger vi push-array-funktionen til at tilføje de emner, der er indtastet af brugeren via variablen 'Topic' i vores array 'AllTopic.'

Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.

Produktion:

For at se koden, skal du først indtaste et emne navn som "AngularJS" som vist ovenfor i tekstboksen og derefter klikke på knappen Send.

  • Når du har klikket på knappen Send, vil du se det element, der blev indtastet i tekstfeltet, føjet til listen over emner.
  • Dette opnås med Display () -funktionen, som kaldes, når der sendes på knappen Send.
  • Funktionen Display () føjer teksten til arrayvariablen kaldet 'AllTopic'. Og vores ng-gentagelsesdirektiv går gennem hver værdi i arrayvariablen 'AllTopic' og viser dem som listeelementer i overensstemmelse hermed.

Resumé

Direktivet "ng-send" bruges til at behandle det input, der er indtastet af brugeren, når formularen sendes.