AngularJS ng-submit s primjerom slanja obrasca

By: James Hartman James Hartman
Hours Ažurirano

AngularJS ng-submit Direktiva

The ng-podnesi direktiva u AngularJS-u koristi se za vezanje aplikacije na događaj slanja u pregledniku. Dakle, u slučaju AngularJS na događaju slanja, možete izvršiti neku obradu unutar samog kontrolera i zatim prikazati obrađene informacije korisniku.

Kako poslati obrazac u AngularJS koristeći ng-submit

Procesima podnošenja informacija na web stranici obično upravlja događaj podnošenja u web pregledniku. Ovaj se događaj obično koristi za slanje informacija koje je korisnik možda unio na web-stranici na poslužitelj za daljnju obradu kao što su vjerodajnice za prijavu, podaci obrasca itd. Podnošenje informacija može se izvršiti putem GET ili POST zahtjeva.

Uzmimo primjer slanja obrazaca u Angularu da vidimo kako poslati obrasce u AngularJS.

U našem primjeru slanja obrasca AngularJS, korisniku ćemo predstaviti tekstni okvir u koji mogu unijeti temu koju žele učiti. Na stranici će se nalaziti gumb za slanje, koji će kada se pritisne dodati temu na neuređeni popis.

Pošaljite obrazac u AngularJS koristeći ng-submit
Slanje obrasca u AngularJS pomoću ng-submit

Primjer slanja AngularJS obrasca

Sada ćemo vidjeti primjer podnošenja obrasca AngularJS iz kontrolera pomoću direktive ng-submit:

<!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>

Objašnjenje koda:

  1. Prvo deklariramo našu HTML oznaku obrasca koja će sadržavati kontrolu "tekstualni okvir" i "gumb za slanje" kao što je prikazano u primjeru događaja slanja obrasca Angular. Zatim koristimo ngsubmit Angular direktivu za vezanje funkcije “Display()” na naš obrazac. Ova funkcija bit će definirana u našem kontroleru i bit će pozvana kada se obrazac pošalje.
  2. Imamo tekstualnu kontrolu u koju će korisnik unijeti temu koju želi naučiti. Ovo će biti vezano uz varijablu pod nazivom 'Topic' koja će se koristiti u našem kontroleru.
  3. Postoji uobičajeni gumb za slanje u AngularJS-u koji će korisnik kliknuti kada unese temu koju želi.
  4. Koristili smo ng-ponovi direktiva za prikaz stavki popisa tema koje korisnik unese. Direktiva ng-repeat prolazi kroz svaku temu u nizu 'AllTopic' i prikazuje naziv teme u skladu s tim.
  5. U našem kontroleru deklariramo varijablu polja pod nazivom 'AllTopic'. Ovo će se koristiti za držanje svih tema koje je korisnik unio u koraku 2.
  6. Definiramo kod za našu Display() funkciju koja će biti pozvana kad god korisnik klikne gumb Pošalji. Ovdje koristimo funkciju push array za dodavanje tema koje je korisnik unio putem varijable 'Topic' u naš niz 'AllTopic'.

Ako se primjer koda obrasca AngularJS uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kod u pregledniku.
Izlaz:

Pošaljite obrazac u AngularJS

Da biste vidjeli da kod radi, prvo unesite naziv teme kao što je "Angular" kao što je prikazano gore u tekstualni okvir, a zatim kliknite na gumb Pošalji.

Pošaljite obrazac u AngularJS

  • Nakon što se klikne gumb za slanje, vidjet ćete da je stavka koja je unesena u tekstualni okvir dodana na popis stavki.
  • To se postiže funkcijom Display(), koja se poziva kada se pritisne gumb za slanje.
  • Funkcija Display() dodaje tekst u varijablu polja pod nazivom 'AllTopic'. A naša direktiva ng-repeat prolazi kroz svaku vrijednost u varijabli polja 'AllTopic' i prikazuje ih kao stavke popisa u skladu s tim.

Rezime

  • Direktiva "ng-submit" koristi se za obradu unosa koje je korisnik unio za slanje obrasca u AngularJS.
  • Procesima podnošenja informacija na web stranici obično upravlja događaj podnošenja u web pregledniku.
  • Podatke je moguće dostaviti putem GET ili POST zahtjeva.
  • Funkcija Display() dodaje tekst u varijablu polja pod nazivom 'AllTopic'.