Come utilizzare "ng-model" in AngularJS con ESEMPI
Cos'è il modello ng in AngularJs?
ng-model è una direttiva in Angular.JS che rappresenta i modelli e il suo scopo principale è associare la "vista" al "modello".
Ad esempio, supponiamo che tu voglia presentare una pagina semplice all'utente finale come quella mostrata di seguito, che chiede all'utente di inserire "Nome" e "Cognome" nelle caselle di testo. E poi vuoi 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 garantirà che i dati nella "vista" e quelli del "modello" siano costantemente sincronizzati.
L'attributo del modello ng
Come discusso nell'introduzione a 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,
- Associazione di controlli quali input, area di testo e selezioni nella vista del modello.
- Specificare un comportamento di convalida: ad esempio, è possibile aggiungere una convalida a una casella di testo in modo che nella casella di testo possano essere inseriti solo caratteri numerici.
- 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 viceversa)
Come utilizzare il modello ng
1) Area di testo
Il tag dell'area di testo viene utilizzato per definire un controllo di input 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.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> <link rel="stylesheet" href="css/bootstrap.css"/> </head> <body > <h1> Guru99 Global Event</h1> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <div ng-app="DemoApp" ng-controller="DemoCtrl"> <form> Topic Description:<br> <br> <textarea rows="4" cols="50" ng-model="pDescription"></textarea><br><br> </form> </div> <script> var app = angular.module('DemoApp',[]); app.controller('DemoCtrl', function($scope){ $scope.pDescription="This topic looks at how Angular JS works \nModels in Angular JS"}); </script> </body> </html>
Spiegazione del codice:
- Le direttiva sul modello ng viene utilizzato per allegare la variabile membro chiamata “pDescription” al controllo “textarea”. Il “pDescription" conterrà effettivamente il testo, che verrà passato al controllo dell'area di testo. Abbiamo anche menzionato 2 attributi per il controllo textarea che sono rows=4 e cols=50. Questi attributi sono stati menzionati in modo da poter mostrare più righe di testo. Definendo questi attributi la textarea ora avrà 4 righe e 50 colonne in modo da poter mostrare più righe di testo.
- Qui stiamo allegando la variabile membro all'oggetto scope chiamato “pDescription” e inserendo un valore stringa nella variabile.
- Tieni presente che stiamo inserendo il valore letterale /n 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, quando si esegue il codice nel browser verrà visualizzato il seguente Output.
Produzione:
Dall'uscita,
- Si vede chiaramente che il valore assegnato al pDescriptLa variabile ion come parte dell'oggetto scope è stata passata al controllo textarea.
- Successivamente viene visualizzato al caricamento della pagina.
2) Elementi di input
La direttiva ng-model può essere applicata anche agli elementi di input quali la casella di testo, le caselle di controllo, i pulsanti di scelta, ecc.
Diamo un'occhiata a un esempio di come possiamo utilizzare ng-model con i tipi di input "textbox" e "checkbox".
Qui avremo un tipo di input di testo che avrà il nome "Guru99" e ci saranno 2 caselle di controllo, una che sarà contrassegnata per impostazione predefinita e l'altra non sarà contrassegnata.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> <link rel="stylesheet" href="css/bootstrap.css"/> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> </head> <body > <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoCtrl"> <form> Topic Description:<br> <br> Name : <input type="text" ng-model="pname"><br> Topic : <br> <input type="checkbox" ng-model="Topic.Controller">Controller<br> <input type="checkbox" ng-model="Topic.Models">Models </form> </div> <script> var app = angular.module('DemoApp',[]); app.controller('DemoCtrl', function($scope){ $scope.pname="Guru99"; $scope.Topic = { Controller:true, Models:false }; }); </script> </body> </html>
Spiegazione del codice:
- Le direttiva sul modello ng viene utilizzato per allegare la variabile membro denominata "pname" al controllo di testo del tipo di input. La variabile "pname" conterrà il testo di "Guru99" che verrà passato al controllo di input del testo. Si noti che è possibile assegnare qualsiasi nome al nome della variabile membro.
- Qui stiamo definendo la nostra prima casella di controllo "Controllers" che è collegata alla variabile membro Topics.Controllers. La casella di controllo sarà contrassegnata per questo controllo di controllo.
- Qui stiamo definendo la nostra prima casella di controllo "Models" che è collegata alla variabile membro Topics.Models. La casella di controllo non verrà contrassegnata per questo controllo di controllo.
- Qui alleghiamo la variabile membro chiamata "pName" e inseriamo un valore stringa "Guru99".
- Stiamo dichiarando una variabile array membro chiamata "Argomenti" e le stiamo assegnando due valori, il primo è "true" e il secondo è "false". Quindi, quando la prima casella di controllo ottiene il valore true, la casella di controllo verrà contrassegnata per questo controllo e, allo stesso modo, poiché il secondo valore è false, la casella di controllo non verrà contrassegnata per questo controllo.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Dall'uscita,
- Si vede chiaramente che il valore assegnato alla variabile pName è “Guru99”
- Poiché il primo valore di controllo è "true", è stato superato, la casella di controllo è contrassegnata per la casella di controllo "Controller". Allo stesso modo, poiché il secondo valore è false, la casella di controllo non è contrassegnata per la casella di controllo "Models".
3) Seleziona l'elemento dal menu a discesa
La direttiva ng-model può anche essere applicata all'elemento select ed essere utilizzata per popolare gli elementi dell'elenco nell'elenco select.
Diamo un'occhiata a un esempio di come possiamo utilizzare il modello ng con il tipo di input selezionato.
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".
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> <link rel="stylesheet" href="css/bootstrap.css"/> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> </head> <body > <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoCtrl"> <form> Topic Description:<br> <br> Name : <input type="text" ng-model="pName" value="Guru99"><br> Topic : <br> <select ng-model="Topics"> <option>{{Topics.option1}}</option> <option>{{Topics.option2}}</option> </select> </form> </div> <script> var app = angular.module('DemoApp',[]); app.controller('DemoCtrl', function($scope){ $scope.pName="Guru99"; $scope.Topics = { option1 : "Controller", option2 : "Module" }; }); </script> </body> </html>
- Le direttiva sul modello ng viene utilizzato per allegare la variabile membro denominata "Argomenti" al controllo del tipo di selezione. All'interno del controllo di selezione, per ciascuna opzione, 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 un valore di "Controllers" e la seconda ha il valore di "Models". Questi valori saranno passati al tag di input select nella vista. Se il codice viene eseguito correttamente, verrà mostrato 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 selezionato ha le opzioni "Controller" e "Modelli".
Sommario
- I modelli in Angular JS sono rappresentati dalla direttiva ng-model. Lo scopo principale di questa direttiva è associare la vista al modello. Come costruire un semplice controller utilizzando le direttive ng-app, ng-controller e ng-model.
- La direttiva ng-model può essere collegata a un controllo di input "area di testo" e le stringhe multilinea possono essere passate dal controller alla vista.
- La direttiva ng-model può essere collegata ai controlli di input, come i controlli testo e casella di controllo, per renderli più dinamici in fase di esecuzione.
- La direttiva ng-model può essere utilizzata anche per popolare un elenco di selezione con opzioni che possono essere visualizzate all'utente.