Invia modulo AngularJS con esempio (ng-submit)

Anonim

Come inviare un modulo utilizzando ng-submit

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

AngularJS fornisce anche una direttiva chiamata ng-submit che può essere utilizzata per associare l'applicazione all'evento submit del browser. Quindi nel caso di AngularJS, sull'evento di invio è possibile effettuare alcune elaborazioni all'interno del controller stesso e quindi visualizzare le informazioni elaborate all'utente.

Facciamo un esempio di come possiamo ottenere questo risultato.

Nel nostro esempio di post di invio,

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 se premuto aggiungerà l'argomento a un elenco non ordinato.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Spiegazione del codice:

  1. Per prima cosa dichiariamo il nostro tag HTML del modulo, che conterrà il controllo "casella di testo" e "pulsante di invio". Quindi stiamo usando la direttiva ng-submit per associare la funzione "Display ()" al nostro form. Questa funzione sarà definita nel nostro controller e verrà chiamata quando il modulo verrà inviato.
  2. Abbiamo un controllo di testo in cui l'utente inserirà l'argomento che desidera apprendere. Questo sarà associato a una variabile chiamata "Topic" che verrà utilizzata nel nostro controller.
  3. C'è il normale pulsante di invio su cui l'utente farà clic dopo aver inserito l'argomento desiderato.
  4. Abbiamo utilizzato la direttiva ng-repeat per visualizzare gli elementi dell'elenco degli argomenti inseriti dall'utente. La direttiva ng-repeat passa attraverso ogni argomento nell'array "AllTopic" e visualizza il nome dell'argomento di conseguenza.
  5. Nel nostro controller, stiamo dichiarando una variabile di matrice chiamata "AllTopic". Questo verrà utilizzato per contenere tutti gli argomenti inseriti 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 usando la funzione push array per aggiungere gli argomenti inseriti dall'utente tramite la variabile "Topic" nel nostro array "AllTopic".

Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.

Produzione:

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

  • Dopo aver fatto clic sul pulsante di invio, 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 di matrice chiamata "AllTopic". E la nostra direttiva ng-repeat passa attraverso ogni valore nella variabile dell'array 'AllTopic' e li visualizza di conseguenza come elementi dell'elenco.

Sommario

La direttiva "ng-submit" viene utilizzata per elaborare l'input immesso dall'utente quando viene inviato il modulo.