El mejor tutorial de AngularJS directiva ng-modelo en 2024. En este tutorial podrás aprender
Directiva ng-modelo,AngularJS ejemplos,de manera vinculante,AngularJS ejemplos,Validar la entrada del usuario,AngularJS ejemplos,estado de la aplicación,AngularJS ejemplos,clase CSS,AngularJS ejemplos,
AngularJS directiva ng-modelo
de instrucciones ng-modelo se utiliza para enlazar los datos de aplicación al controlador de valor HTML (input, select, textarea) de.
Directiva ng-modelo
ng-model
directiva puede introducir valores de las variables y los enlaces de dominio creado AngularJS.
AngularJS ejemplos
<Div ng-app = "myApp " ng-controller = "myCtrl">
Nombre: <input-ng modelo = " nombre">
</ Div>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'myCtrl', function ($ ámbito de aplicación) {
$ Scope.name = "John Doe";
});
</ Script>
Trate »
de manera vinculante
De dos vías de unión, cuando se modifica el valor del campo de entrada, el valor de la propiedad será también de la opinión AngularJS:
AngularJS ejemplos
<Div ng-app = "myApp " ng-controller = "myCtrl">
Nombre: <input-ng modelo = " nombre">
<H1> se entra: {{nombre}} </ h1>
</ Div>
Trate »
Validar la entrada del usuario
AngularJS ejemplos
<Forma ng-app = "" name = "myForm">
e-mail:
<Input type = "email" nombre = "MiDirección" ng-modelo = "text">
<Span ng-show = "myForm.myAddress . $ Error.email"> no es una dirección válida de correo electrónico </ span>
</ Form>
Trate » El ejemplo anterior, el mensaje en el ng-show
propiedad devuelve true
vitrina.
estado de la aplicación
ng-model
Directiva establece el valor de estado (no válido, sucio, tocado, de error ) para los datos de aplicación:
AngularJS ejemplos
<Forma ng-app = "" name = "myForm" ng-init = "myText = 'test@w3write.com'">
e-mail:
<Entrada type = "email" nombre = ng-modelo "MiDirección" = "myText" required> </ p>
<H1> Estado </ h1>
{{MyForm.myAddress. $ Válida}}
{{MyForm.myAddress. $ Sucia}}
{{MyForm.myAddress. $ Tocó}}
</ Form>
Trate »
clase CSS
ng-model
instrucción en base a sus estados proporcionan clases CSS para elementos HTML:
AngularJS ejemplos
<Style>
input.ng-inválida {
background-color: azul claro;
}
</ Style>
<Cuerpo>
<Forma ng-app = "" name = "myForm">
Introduzca su nombre:
<Input name = "MiDirección" ng -model = "text" requerida>
</ Form>
Trate » ng-model
instrucción basado en el campo de formulario de estado para añadir / quitar las siguientes categorías:
- ng-vacía
- ng-no-vacía
- ng-tocado
- ng-intacta
- ng-válida
- ng-inválido
- ng-sucia
- ng-pendiente
- ng-prístina