AngularJS ng-submit med Form Submit Eksempel

Af: James Hartman James Hartman
Hours Opdateret

AngularJS ng-indsende direktiv

ng-indsende direktiv i AngularJS bruges til at binde applikationen til browserens submit-begivenhed. Så i tilfælde af AngularJS på submit-begivenheden kan du udføre en vis behandling inden for selve controlleren og derefter vise de behandlede oplysninger til brugeren.

Sådan indsender du en formular i AngularJS ved hjælp af ng-submit

Processerne med at indsende oplysninger på en webside håndteres normalt af indsendelseshændelsen i webbrowseren. Denne hændelse bruges normalt til at sende information, som brugeren kan have indtastet på en webside, til serveren for yderligere behandling såsom login-legitimationsoplysninger, formulardata osv. Indsendelse af information kan ske via GET- eller POST-anmodning.

Lad os tage et eksempel på indsendelse af Angular-formularer for at se, hvordan du indsender formularer i AngularJS.

I vores AngularJS-formularindsend eksempel vil vi præsentere en tekstboks for brugeren, hvori de kan indtaste det emne, de vil lære. Der vil være en indsend-knap på siden, som når den trykkes vil tilføje emnet til en uordnet liste.

Indsend en formular i AngularJS ved hjælp af ng-submit
Indsendelse af en formular i AngularJS ved hjælp af ng-submit

Eksempel på indsendelse af AngularJS-formular

Nu vil vi se et eksempel på AngularJS-formularindsendelse fra Controller ved hjælp af ng-submit-direktivet:

<!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()">
        &nbsp;&nbsp;&nbsp;
        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>

Kodeforklaring:

  1. Vi erklærer først vores form-HTML-tag, som vil holde "tekstboksen" og "send-knappen"-kontrollen som vist i eksempelet på Angular formular-indsend begivenhed. Vi bruger derefter ngsubmit Angular-direktivet til at binde funktionen "Display()" til vores formular. Denne funktion vil blive defineret i vores controller og vil blive kaldt, når formularen indsendes.
  2. Vi har en tekstkontrol, hvor brugeren vil indtaste 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 submit-knap i AngularJS, som brugeren vil klikke på, når de har indtastet det emne, de ønsker.
  4. Vi har brugt ng-gentag direktiv for at vise listeelementer over de emner, som brugeren indtaster. ng-repeat-direktivet går gennem hvert emne i arrayet 'AllTopic' og viser emnenavnet i overensstemmelse hermed.
  5. I vores controller erklærer vi en matrixvariabel kaldet 'AllTopic'. Dette vil blive brugt til at indeholde alle de emner, som brugeren indtastede i trin 2.
  6. Vi er ved at definere koden for vores Display() funktion, som vil blive kaldt, hver gang brugeren klikker på knappen Send. Herovre bruger vi push-array-funktionen til at tilføje de emner, som brugeren har indtastet via variablen 'Emne' til vores array 'AllTopic'.

Hvis AngularJS-formeksempelkoden udføres med succes, vil følgende output blive vist, når du kører din kode i browseren.
Output:

Indsend en formular i AngularJS

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

Indsend en formular i AngularJS

  • Når du har klikket på indsend-knappen, vil du se det element, der blev indtastet i tekstboksen, føjet til listen over elementer.
  • Dette opnås ved hjælp af Display()-funktionen, som kaldes, når der trykkes på send-knappen.
  • Funktionen Display() tilføjer teksten til arrayvariablen kaldet 'AllTopic'. Og vores ng-repeat-direktiv går gennem hver værdi i array-variablen 'AllTopic' og viser dem som listeelementer i overensstemmelse hermed.

Resumé

  • Direktivet "ng-submit" bruges til at behandle input, som brugeren har indtastet til formularindsendelse i AngularJS.
  • Processerne med at indsende oplysninger på en webside håndteres normalt af indsendelseshændelsen i webbrowseren.
  • Indsendelse af oplysninger kan ske gennem GET eller POST anmodning.
  • Funktionen Display() tilføjer teksten til arrayvariablen kaldet 'AllTopic'.

Opsummer dette indlæg med: