AngularJS direttiva ng-modello

Next: AngularJS Scope (Ambito di applicazione)

istruzioni ng-modello è utilizzato per legare i dati dell'applicazione al controllore il valore HTML (input, selezionare, textarea) di.

direttiva ng-modello

ng-model direttiva può immettere i valori delle variabili e dominio creato binding AngularJS.

AngularJS esempi

<Div ng-app = "myApp " ng-controllore = "myCtrl">
Nome: <ng-modello di input = " nome">
</ Div>

<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'myCtrl', function ($ portata) {
$ Scope.name = "John Doe";
});
</ Script>

Prova »

modo vincolante

binding bidirezionale, quando si modifica il valore del campo di input, il valore della proprietà sarà anche AngularJS recensione:

AngularJS esempi

<Div ng-app = "myApp " ng-controllore = "myCtrl">
Nome: <ng-modello di input = " nome">
<H1> si entra: {{nome}} </ h1>
</ Div>

Prova »

Convalidare l'input dell'utente

AngularJS esempi

<Form ng-app = "" name = "myForm">
E-mail:
<Input type = "email" nome = "myAddress" ng-modello = "text">
<Span ng-show = "myForm.myAddress . $ Error.email"> non è un indirizzo email valido </ span>
</ Form>

Prova »

L'esempio di cui sopra, il messaggio nella ng-show proprietà restituisce true vetrina.

stato dell'applicazione

ng-model direttiva prevede valore di stato (non valido, sporco, toccato, errore ) per i dati dell'applicazione:

AngularJS esempi

<Form ng-app = "" name = "myForm" ng-init = "myText = '[email protected]'">
E-mail:
<Input type = "email" nome = ng-modello "myAddress" = "myText" richiesto> </ p>
<H1> Stato </ h1>
{{MyForm.myAddress. $ Valida}}
{{MyForm.myAddress. $ Sporco}}
{{MyForm.myAddress. $ Toccato}}
</ Form>

Prova »