AngularJS - Input nei moduli

Gestione dei dati del modulo

Nelle applicazioni web il modo più naturale per ottenere i dati dell'utente è attraverso i moduli, con essi possiamo creare elementi che catturano testo o semplici conferme come caselle di controllo, ma tutto questo può essere tradotto come dati dell'utente, con essi possiamo fare diverse elaborazioni.
Nel AngularJS Lavorare con questi input di dati è molto semplice, poiché grazie al modo in cui è stata progettata la libreria, possiamo trasformare parte di questi dati che riceviamo in azioni nella nostra applicazione, sia per eseguire calcoli che per definirne il comportamento.
In questa sezione vedremo qualcosa in più su come gestire l'input nei form usando AngularJS.
Come funziona?Il modo in cui possiamo fare l'unione tra gli elementi di input e la nostra logica in AngularJS è molto semplice, dobbiamo usare la proprietà ng-model e tutto prenderà una sorta di relazione, così il valore di ciò che entriamo per forma può essere manipolato in AngularJS, questo può applicarsi a inserire testo, pulsanti di opzione, casella di controllo, ecc.
Vediamo di seguito un piccolo esempio di ciò che stiamo spiegando:

Quello che succede qui è che nell'ambito di Il nostro controllore possiamo manipolare ciò che l'utente fa nel casella di controllo marcatore, quindi se l'utente lo contrassegna, riceveremo immediatamente marcatore come vero e se lo deselezioni avremo la risposta opposta.
Possiamo andare un po' oltre e possiamo ambientarci Il nostro controllore Quello marcatore è contrassegnato per impostazione predefinita, quindi quando l'utente vede la pagina per la prima volta la casella di controllo verrà contrassegnata.
Aggiungi azioni
Ma non solo nell'acquisizione dei dati dobbiamo rimanere, possiamo e dobbiamo includere azioni una volta ricevuti gli input, in AngularJS Possiamo chiamare funzioni e metodi che vengono eseguiti in un evento del nostro elemento di input, per esempio faremo una piccola calcolatrice che prende la stima dell'investimento per fare un'impresa, quello che faremo è moltiplicare il valore ricevuto per 10, facciamo vedere:
1- Per prima cosa dobbiamo stabilire gli elementi HTML che useremo, come nell'esempio precedente creeremo un controller e il l'input farà parte del nostro modello:

INGRANDIRE

2- Vediamo che abbiamo introdotto una nuova proprietà ng-cambiamento e abbiamo assegnato la chiamata a una funzione chiamata calcoloInversion () Ciò significa che ogni volta che il nostro campo di input cambia, verrà chiamata la funzione, come possiamo vedere è qualcosa di molto semplice.
3- Ora costruiremo il codice con AngularJS che darà vita a ciò che abbiamo visto:

4- Costruiamo il controller appropriato, quindi indichiamo un valore iniziale per il modello, in questo caso lo identifichiamo a 0, questo include entrambi gli elementi entrambi Stimato iniziale Che cosa necessario, quindi creiamo la funzione calcoloInversion () Vediamo che lo facciamo nel cosiddetto ambito del nostro controller, in questo modo è associato al nostro elemento. Con questo la nostra applicazione dovrebbe funzionare a un livello base.
Ovviamente in questo esempio mancano diverse convalide e tiene conto solo quando l'utente modifica il valore del testo di input, ma serve come introduzione per includere azioni nelle nostre applicazioni scritte con AngularJS.
Precedentepagina 1 di 2Prossimo