Cos'è ng-model in AngularJs?
ng-model è una direttiva in Angular.JS che rappresenta i modelli e il suo scopo principale è legare la "vista" al "modello".
Ad esempio, supponiamo di voler presentare all'utente finale una pagina semplice come quella mostrata di seguito che chiede all'utente di inserire il "Nome" e il "Cognome" nelle caselle di testo. E poi volevi assicurarti di memorizzare le informazioni che l'utente ha inserito nel tuo modello di dati.
È possibile utilizzare la direttiva ng-model per mappare i campi della casella di testo "Nome" e "Cognome" al modello di dati.
La direttiva ng-model assicurerà che i dati nella "vista" e quelli del tuo "modello" siano mantenuti sincronizzati per tutto il tempo.
In questo tutorial imparerai-
- L'attributo ng-model
- Come usare ng-model
- Area di testo
- Elementi di input
- Seleziona il modulo dell'elemento dal menu a discesa
L'attributo ng-model
Come discusso nell'introduzione di questo capitolo, l'attributo ng-model viene utilizzato per associare i dati nel modello alla vista presentata all'utente.
L'attributo ng-model viene utilizzato per,
- Binding controlli come input, area di testo e selezioni nella vista nel modello.
- Fornire un comportamento di convalida: ad esempio, è possibile aggiungere una convalida a una casella di testo in cui è possibile immettere solo caratteri numerici nella casella di testo.
- L'attributo ng-model mantiene lo stato del controllo (Per stato, intendiamo che il controllo e i dati devono essere sempre mantenuti sincronizzati. Se il valore dei nostri dati cambia, cambierà automaticamente il valore nel controllo e vice versa)
Come usare ng-model
1) Area di testo
Il tag dell'area di testo viene utilizzato per definire un controllo di immissione di testo su più righe. L'area di testo può contenere un numero illimitato di caratteri e il testo viene visualizzato con un carattere a larghezza fissa.
Quindi ora diamo un'occhiata a un semplice esempio di come possiamo aggiungere la direttiva ng-model a un controllo dell'area di testo.
In questo esempio, vogliamo mostrare come possiamo passare una stringa multilinea dal controller alla vista e allegare quel valore al controllo dell'area di testo.
Event Registration Guru99 Global Event
Spiegazione del codice:
- La direttiva ng-model viene utilizzata per collegare la variabile membro chiamata "pDescription" al controllo "textarea".
La variabile "pDescription" conterrà effettivamente il testo, che verrà passato al controllo dell'area di testo. Abbiamo anche menzionato 2 attributi per il controllo textarea che è rows = 4 e cols = 50. Questi attributi sono stati menzionati in modo che possiamo mostrare più righe di testo. Definendo questi attributi la textarea avrà ora 4 righe e 50 colonne in modo che possa mostrare più righe di testo.
- Qui stiamo collegando la variabile membro all'oggetto scope chiamato "pDescription" e inserendo un valore stringa nella variabile.
- Si noti che stiamo inserendo il / n letterale nella stringa in modo che il testo possa essere di più righe quando viene visualizzato nell'area di testo. Il valore letterale / n divide il testo in più righe in modo che possa essere visualizzato nel controllo textarea come più righe di testo.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'uscita
- Si può vedere chiaramente che il valore assegnato alla variabile pDescription come parte dell'oggetto scope è stato passato al controllo textarea.
- Successivamente, è stato visualizzato quando la pagina è stata caricata.
2) Elementi di input
La direttiva ng-model può essere applicata anche agli elementi di input come la casella di testo, le caselle di controllo, i pulsanti di opzione, ecc.
Diamo un'occhiata a un esempio di come possiamo usare il modello ng con il tipo di input "textbox" e "checkbox".
Qui avremo un tipo di input di testo che avrà il nome di "Guru99" e ci saranno 2 caselle di controllo, una che sarà contrassegnata di default e l'altra non sarà contrassegnata.
Event Registration Guru99 Global Event
Spiegazione del codice:
- La direttiva ng-model viene utilizzata per collegare la variabile membro chiamata "pname" al controllo di testo del tipo di input. La variabile "pname" conterrà il testo di "Guru99" che verrà passato al controllo di immissione del testo. Notare che qualsiasi nome può essere assegnato al nome della variabile membro.
- Qui stiamo definendo la nostra prima casella di controllo "Controller" che è allegata alla variabile membro Topics.Controllers. La casella di controllo sarà contrassegnata per questo controllo di verifica.
- Qui stiamo definendo la nostra prima casella di controllo "Modelli" che è allegata alla variabile membro Topics.Models. La casella di controllo non sarà contrassegnata per questo controllo di verifica.
- Qui stiamo collegando la variabile membro chiamata "pName" e inserendo un valore di stringa "Guru99".
- Stiamo dichiarando una variabile dell'array di membri chiamata "Topics" e assegnandole due valori, il primo è "true" e il secondo è "false".
Quindi, quando la prima casella di controllo assume il valore di true, la casella di controllo verrà contrassegnata per questo controllo, e allo stesso modo, poiché il secondo valore è falso, la casella di controllo non sarà contrassegnata per questo controllo.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'uscita,
- Si può vedere chiaramente che il valore assegnato alla variabile pName è "Guru99"
- Poiché il primo valore di controllo è "true", è passato, la casella di controllo è contrassegnata per la casella di controllo "Controller". Allo stesso modo, poiché il secondo valore è falso, la casella di controllo non è contrassegnata per la casella di controllo "Modelli".
3) Selezionare il menu a discesa del modulo di elemento
La direttiva ng-model può anche essere applicata all'elemento select ed essere utilizzata per popolare gli elementi dell'elenco nell'elenco di selezione.
Diamo un'occhiata a un esempio di come possiamo usare il modello ng con il tipo di input select.
Qui avremo un tipo di input di testo che avrà il nome di "Guru99" e ci sarà un elenco di selezione con 2 voci di elenco di "Controller" e "Modelli".
Event Registration Guru99 Global Event
- La direttiva ng-model viene utilizzata per collegare la variabile membro denominata "Topics" al controllo del tipo di selezione. All'interno del controllo di selezione, per ciascuna delle opzioni, alleghiamo la variabile membro di Topics.option1 per la prima opzione e Topics.option2 per la seconda opzione.
- Qui stiamo definendo la nostra variabile array Topics che contiene 2 coppie chiave-valore. La prima coppia ha il valore "Controller" e la seconda ha il valore "Modelli". Questi valori verranno passati per selezionare il tag di input nella vista.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output.
Produzione:
Dall'output, si può vedere che il valore assegnato alla variabile pName è "Guru99" e possiamo vedere che il controllo di input di selezione ha le opzioni "Controller" e "Modelli".
Sommario
- I modelli in Angular JS sono rappresentati dalla direttiva ng-model. Lo scopo principale di questa direttiva è legare la vista al modello. Come costruire un semplice controller usando le direttive ng-app, ng-controller e ng-model.
- La direttiva ng-model può essere collegata a un controllo di input di "area di testo" e stringhe multilinea possono essere passate dal controller alla vista.
- La direttiva ng-model può essere collegata a controlli di input come il testo e i controlli della casella di controllo per renderli più dinamici in fase di esecuzione.
- La direttiva ng-model può anche essere utilizzata per popolare un elenco di selezione con opzioni che possono essere visualizzate all'utente.