AngularJS ng-submit koos vormi esitamise näitega

Autor: James Hartman James Hartman
Hours Ajakohastatud

AngularJS ng-submit direktiiv

. ng-submit AngularJS-i direktiivi kasutatakse rakenduse sidumiseks brauseri saatmissündmusega. Nii et juhul AngularJS esitamise sündmusel saate töötlemistoiminguid teostada vastutava töötleja enda sees ja seejärel kuvada töödeldud teavet kasutajale.

Kuidas esitada vorm AngularJS-is, kasutades funktsiooni ng-submit

Veebilehe teabe esitamise protsesse käsitleb tavaliselt veebibrauseris esitamise sündmus. Seda sündmust kasutatakse tavaliselt kasutaja poolt veebilehele sisestatud teabe (nt sisselogimismandaadid, vormiandmed jne) saatmiseks serverisse edasiseks töötlemiseks. Teabe edastamine toimub GET- või POST-päringu kaudu.

Võtame Angular vormi esitamise näite, et näha, kuidas AngularJS-is vorme esitada.

Meie AngularJS-i vormi esitamise näites esitame kasutajale tekstikasti, kuhu nad saavad sisestada teema, mida nad soovivad õppida. Lehel on esitamisnupp, millele vajutades lisatakse teema järjestamata nimekirja.

Esitage vorm AngularJS-is, kasutades ng-submit
Vormi esitamine AngularJS-is ng-submit abil

AngularJS vormi esitamise näide

Nüüd näeme näidet AngularJS-vormingust, mis esitatakse kontrollerilt, kasutades käskkirja 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>

Koodi selgitus:

  1. Esmalt deklareerime oma vormi HTML-i märgendi, mis hoiab all "tekstikasti" ja "esitamisnupu" juhtelementi, nagu on näidatud nurkvormi esitamise sündmuse näites. Seejärel kasutame ngsubmit Angular direktiivi, et siduda funktsioon "Display()" meie vormiga. See funktsioon defineeritakse meie kontrolleris ja seda kutsutakse välja vormi esitamisel.
  2. Meil on teksti juhtelement, millesse kasutaja sisestab teema, mida ta soovib õppida. See seotakse muutujaga „Teema”, mida kasutatakse meie kontrolleris.
  3. AngularJS-is on tavaline saatmisnupp, mida kasutaja klõpsab, kui ta on soovitud teema sisestanud.
  4. Oleme kasutanud ng-korda käsk, et kuvada kasutaja sisestatud teemade loendi üksused. Direktiiv ng-repeat läbib iga teema massiivi 'AllTopic' ja kuvab vastavalt teema nime.
  5. Meie kontrolleris deklareerime massiivimuutuja nimega "AllTopic". Seda kasutatakse kõigi kasutaja poolt 2. etapis sisestatud teemade hoidmiseks.
  6. Määratleme oma funktsiooni Display() koodi, mida kutsutakse välja iga kord, kui kasutaja klõpsab nuppu Esita. Siin kasutame tõukemassiivi funktsiooni, et lisada kasutaja poolt muutuja 'Teema' kaudu sisestatud teemad meie massiivi 'AllTopic'.

Kui AngularJS-i vormi näidiskood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.
Väljund:

Esitage vorm AngularJS-is

Koodi toimimise nägemiseks sisestage esmalt teema nimi, nagu "nurkne", nagu ülal tekstikastis näidatud, ja seejärel klõpsake nuppu Esita.

Esitage vorm AngularJS-is

  • Pärast esitamisnupul klõpsamist näete tekstikasti sisestatud elementi lisatud üksuste loendisse.
  • See saavutatakse funktsiooni Display() abil, mida kutsutakse esitamisnupu vajutamisel.
  • Funktsioon Display() lisab teksti massiivi muutujale nimega 'AllTopic'. Ja meie ng-repeat direktiiv läbib iga väärtuse massiivimuutujas 'AllTopic' ja kuvab need vastavalt loendiüksustena.

kokkuvõte

  • Käskkirja „ng-submit” kasutatakse kasutaja sisestatud sisendi töötlemiseks AngularJS-i vormi esitamiseks.
  • Veebilehe teabe esitamise protsesse käsitleb tavaliselt veebibrauseris esitamise sündmus.
  • Teabe edastamine toimub GET-i või POST-i päringu kaudu.
  • Funktsioon Display() lisab teksti massiivi muutujale nimega 'AllTopic'.