AngularJS ng-submit med Form Submit Exempel

AngularJS ng-submit-direktiv

Smakämnen ng-submit direktiv i AngularJS används för att binda applikationen till webbläsarens submit-händelse. Så i fallet med AngularJS på submit-händelsen kan du utföra viss behandling inom den registeransvarige själv och sedan visa den behandlade informationen för användaren.

Hur man skickar in ett formulär i AngularJS med ng-submit

Processerna för att skicka information på en webbsida hanteras normalt av submit-händelsen i webbläsaren. Denna händelse används normalt för att skicka information som användaren kan ha angett på en webbsida till servern för vidare bearbetning som inloggningsuppgifter, formulärdata, etc. Inlämning av information kan göras genom GET- eller POST-förfrågan.

Låt oss ta ett exempel på ett Angular-formulär för att se hur man skickar in formulär i AngularJS.

I vårt AngularJS-formulärsexempel kommer vi att presentera en textruta för användaren där de kan skriva in det ämne de vill lära sig. Det kommer att finnas en skicka-knapp på sidan, som när den trycks kommer att lägga till ämnet till en oordnad lista.

Skicka ett formulär i AngularJS med ng-submit

AngularJS Form Submit Exempel

Nu kommer vi att se ett exempel på AngularJS-formulär som skickas från Controller med 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>

Kodförklaring:

Vi deklarerar först vår HTML-tagg för formulär, som kommer att hålla kontrollen "textruta" och "skicka knapp" som visas i exemplet på Angular form submit event. Vi använder sedan ngsubmit Angular-direktivet för att binda funktionen "Display()" till vårt formulär. Denna funktion kommer att definieras i vår controller och kommer att anropas när formuläret skickas in.
Vi har en textkontroll där användaren anger det ämne de vill lära sig. Detta kommer att vara bundet till en variabel som heter 'Ämne' som kommer att användas i vår styrenhet.
Det finns den normala skicka-knappen i AngularJS som användaren kommer att klicka på när de har skrivit in det ämne de vill ha.
Vi har använt ng-upprepa direktiv för att visa listobjekt över de ämnen som användaren anger. Direktivet ng-repeat går igenom varje ämne i arrayen 'AllTopic' och visar ämnesnamnet därefter.
I vår styrenhet deklarerar vi en arrayvariabel som heter 'AllTopic'. Detta kommer att användas för att hålla alla ämnen som angetts av användaren i steg 2.
Vi definierar koden för vår Display() funktion som kommer att anropas när användaren klickar på knappen Skicka. Här borta använder vi push array-funktionen för att lägga till de ämnen som användaren matat in via variabeln 'Ämne' i vår array 'AllTopic'.

Om AngularJS-formexempelkoden exekveras framgångsrikt, kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:

För att se koden fungera, ange först ett ämnesnamn som "Angular" som visas ovan i textrutan och klicka sedan på knappen Skicka.

När du har klickat på knappen Skicka kommer du att se objektet som skrevs in i textrutan som lagts till i listan över objekt.
Detta uppnås med Display()-funktionen, som anropas när du trycker på knappen Skicka.
Funktionen Display() lägger till texten i arrayvariabeln som heter 'AllTopic'. Och vårt ng-repeat-direktiv går igenom varje värde i arrayvariabeln 'AllTopic' och visar dem som listobjekt därefter.

Sammanfattning

Direktivet "ng-submit" används för att bearbeta indata som användaren matat in för formulärsändning i AngularJS.
Processerna för att skicka information på en webbsida hanteras normalt av submit-händelsen i webbläsaren.
Inlämning av information kan göras genom GET eller POST begäran.
Funktionen Display() lägger till texten i arrayvariabeln som heter 'AllTopic'.

Du kanske gillar: