AngularJS ng-submit con esempio di invio del modulo

By: James Hartmann James Hartmann
Hours aggiornato

Direttiva ng-submit di AngularJS

Migliori ng-invia La direttiva in AngularJS viene utilizzata per associare l'applicazione all'evento di invio del browser. Quindi nel caso di AngularJS sull'evento di invio, è possibile eseguire alcune elaborazioni all'interno del titolare del trattamento stesso e quindi visualizzare le informazioni elaborate all'utente.

Come inviare un modulo in AngularJS utilizzando ng-submit

I processi di invio delle informazioni su una pagina Web sono normalmente gestiti dall'evento di invio nel browser Web. Questo evento viene normalmente utilizzato per inviare informazioni che l'utente potrebbe aver inserito in una pagina Web al server per un'ulteriore elaborazione come credenziali di accesso, dati del modulo, ecc. L'invio di informazioni può essere effettuato tramite richiesta GET o POST.

Prendiamo un esempio di invio di moduli Angular per vedere come inviare moduli in AngularJS.

Nel nostro esempio di invio del form AngularJS, presenteremo una casella di testo all'utente in cui può inserire l'argomento che desidera apprendere. Ci sarà un pulsante di invio sulla pagina, che quando premuto aggiungerà l'argomento a un elenco non ordinato.

Invia un modulo in AngularJS utilizzando ng-submit
Invio di un modulo in AngularJS utilizzando ng-submit

Esempio di invio del modulo AngularJS

Ora vedremo un esempio di invio di moduli AngularJS dal Controller utilizzando la direttiva 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>

Code Spiegazione:

  1. Stiamo innanzitutto dichiarando il nostro tag HTML del form, che conterrà il controllo "casella di testo" e "pulsante di invio" come mostrato nell'esempio dell'evento di invio del form Angular. Stiamo quindi utilizzando la direttiva Angular ngsubmit per associare la funzione "Display()" al nostro form. Questa funzione sarà definita nel nostro controller e verrà chiamata quando il form verrà inviato.
  2. Abbiamo un controllo di testo in cui l'utente inserirà l'argomento che desidera imparare. Questo sarà associato a una variabile chiamata "Topic" che verrà utilizzata nel nostro controller.
  3. C'è il normale pulsante di invio in AngularJS su cui l'utente farà clic quando avrà inserito l'argomento desiderato.
  4. Abbiamo usato il ng-ripetere direttiva per visualizzare le voci dell'elenco degli argomenti immessi dall'utente. La direttiva ng-repeat attraversa ciascun argomento nell'array "AllTopic" e visualizza il nome dell'argomento di conseguenza.
  5. Nel nostro controller stiamo dichiarando una variabile array chiamata "AllTopic". Questo verrà utilizzato per contenere tutti gli argomenti immessi dall'utente nel passaggio 2.
  6. Stiamo definendo il codice per la nostra funzione Display() che verrà chiamata ogni volta che l'utente fa clic sul pulsante Invia. Qui stiamo utilizzando la funzione push array per aggiungere gli argomenti immessi dall'utente tramite la variabile "Topic" nel nostro array "AllTopic".

Se il codice di esempio del form AngularJS viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:

Invia un modulo in AngularJS

Per vedere il codice funzionare, per prima cosa inserisci un nome di argomento come "Angular" come mostrato sopra nella casella di testo e poi fai clic sul pulsante Invia.

Invia un modulo in AngularJS

  • Dopo aver cliccato sul pulsante Invia, vedrai l'elemento inserito nella casella di testo aggiunto all'elenco degli elementi.
  • Ciò viene ottenuto dalla funzione Display(), che viene chiamata quando viene premuto il pulsante di invio.
  • La funzione Display() aggiunge il testo alla variabile dell'array denominata "AllTopic". E la nostra direttiva ng-repeat esamina ogni valore nella variabile dell'array "AllTopic" e li visualizza di conseguenza come elementi dell'elenco.

Sintesi

  • La direttiva "ng-submit" viene utilizzata per elaborare l'input inserito dall'utente per l'invio del modulo in AngularJS.
  • I processi di invio delle informazioni su una pagina Web sono normalmente gestiti dall'evento di invio nel browser Web.
  • L'invio delle informazioni può essere effettuato tramite richiesta GET o POST.
  • La funzione Display() aggiunge il testo alla variabile dell'array denominata "AllTopic".

Riassumi questo post con: