Cómo usar “ng-model” en AngularJS con EJEMPLOS
james hartman
¿Qué es ng-model en AngularJs?
ng-model es una directiva en Angular.JS que representa modelos y su propósito principal es vincular la "vista" al "modelo".
Por ejemplo, supongamos que desea presentar una página sencilla al usuario final como la que se muestra a continuación, en la que se le pide que ingrese el “Nombre” y el “Apellido” en cuadros de texto. Y luego desea asegurarse de almacenar la información que el usuario ha ingresado en su modelo de datos.
Puede utilizar la directiva ng-model para asignar los campos del cuadro de texto de “Nombre” y “Apellido” a su modelo de datos.
La directiva ng-model garantizará que los datos de la “vista” y los de su “modelo” se mantengan sincronizados todo el tiempo.
El atributo ng-modelo
Como se analizó en la introducción de este capítulo, el atributo ng-model se utiliza para vincular los datos de su modelo a la vista presentada al usuario.
El atributo ng-model se utiliza para,
- Vincular controles como entrada, área de texto y selecciones en la vista en el modelo.
- Proporcionar un comportamiento de validación: por ejemplo, se puede agregar una validación a un cuadro de texto que indique que solo se pueden ingresar caracteres numéricos en el cuadro de texto.
- El atributo ng-model mantiene el estado del control (por estado, queremos decir que el control y los datos deben mantenerse siempre sincronizados. Si el valor de nuestros datos cambia, cambiará automáticamente el valor en el control y viceversa)
Cómo usar ng-modelo
1) Área de texto
La etiqueta de área de texto se utiliza para definir un control de entrada de texto de varias líneas. El área de texto puede contener una cantidad ilimitada de caracteres y el texto se representa en una fuente de ancho fijo.
Ahora veamos un ejemplo simple de cómo podemos agregar la directiva ng-model a un control de área de texto.
En este ejemplo, queremos mostrar cómo podemos pasar una cadena multilínea desde el controlador a la vista y adjuntar ese valor al control del área de texto.
<!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>
Explicación del código:
- La directiva de modelo ng se utiliza para adjuntar la variable miembro llamada “pDescription” al control “textarea”. El “pDescription” en realidad contendrá el texto, que se pasará al control del área de texto. También hemos mencionado 2 atributos para el control de área de texto que son filas = 4 y columnas = 50. Estos atributos se han mencionado para que podamos mostrar varias líneas de texto. Al definir estos atributos, el área de texto ahora tendrá 4 filas y 50 columnas para que pueda mostrar varias líneas de texto.
- Aquí estamos adjuntando la variable miembro al objeto de alcance llamado "pDescription” y poniendo un valor de cadena a la variable.
- Tenga en cuenta que estamos colocando el literal /n en la cadena para que el texto pueda tener varias líneas cuando se muestre en el área de texto. El literal /n divide el texto en varias líneas para que pueda representarse en el control del área de texto como varias líneas de texto.
Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute el código en el navegador.
Salida:
Desde la salida,
- Se puede observar claramente que el valor asignado a la pDescriptLa variable ion como parte del objeto de alcance se pasó al control de área de texto.
- Posteriormente se ha mostrado al cargar la página.
2) Elementos de entrada
La directiva ng-model también se puede aplicar a los elementos de entrada, como el cuadro de texto, casillas de verificación, botones de opción, etc.
Veamos un ejemplo de cómo podemos utilizar el modelo ng con el tipo de entrada “cuadro de texto” y “casilla de verificación”.
Aquí tendremos un tipo de entrada de texto que tendrá el nombre de “Guru99” y habrá 2 casillas de verificación, una que estará marcada por defecto y la otra no estará marcada.
<!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>
Explicación del código:
- La directiva de modelo ng se utiliza para adjuntar la variable miembro llamada "pname" al control de texto del tipo de entrada. La variable "pname" contendrá el texto de "Guru99" que se pasará al control de entrada de texto. Tenga en cuenta que se puede dar cualquier nombre al nombre de la variable miembro.
- Aquí definimos nuestra primera casilla de verificación “Controladores”, que está asociada a la variable miembro Topics.Controllers. La casilla de verificación estará marcada para este control de verificación.
- Aquí definimos nuestra primera casilla de verificación “Modelos”, que está asociada a la variable miembro Topics.Models. La casilla de verificación no estará marcada para este control de verificación.
- Aquí adjuntamos la variable miembro llamada "pName" y colocamos un valor de cadena de "Guru99".
- Estamos declarando una variable de matriz miembro llamada "Temas" y le damos dos valores, el primero es "verdadero" y el segundo es "falso". Entonces, cuando la primera casilla de verificación obtiene el valor verdadero, la casilla de verificación se marcará para este control y, de la misma manera, dado que el segundo valor es falso, la casilla de verificación no se marcará para este control.
Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute el código en el navegador.
Salida:
Desde la salida,
- Se puede observar claramente que el valor asignado a la variable pName es “Guru99”
- Dado que el primer valor de verificación es "verdadero", se aprobó la prueba, por lo que la casilla de verificación "Controladores" está marcada. Asimismo, dado que el segundo valor es falso, la casilla de verificación "Modelos" no está marcada.
3) Seleccionar elemento del menú desplegable
La directiva ng-model también se puede aplicar al elemento de selección y usarse para completar los elementos de la lista en la lista de selección.
Veamos un ejemplo de cómo podemos usar el modelo ng con el tipo de entrada seleccionado.
Aquí tendremos un tipo de entrada de texto que tendrá el nombre de "Guru99" y habrá una lista de selección con 2 elementos de lista de "Controlador" y "Modelos".
<!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>
- La directiva de modelo ng se utiliza para adjuntar la variable miembro llamada "Temas" al control de tipo de selección. Dentro del control de selección, para cada una de las opciones, adjuntamos la variable miembro de Topics.option1 para la primera opción y Topics.option2 para la segunda opción.
- Aquí estamos definiendo nuestra variable de matriz Topics que contiene 2 pares clave-valor. El primer par tiene un valor de “Controladores” y el segundo tiene el valor de “Modelos”. Estos valores se pasarán a la etiqueta de entrada de selección en la vista. Si el código se ejecuta correctamente, se mostrará la siguiente salida.
Salida:
En la salida, se puede ver que el valor asignado a la variable pName es "Guru99" y podemos ver que el control de entrada de selección tiene las opciones de "Controladores" y "Modelos".
Resumen
- Los modelos en Angular JS están representados por la directiva ng-model. El objetivo principal de esta directiva es vincular la vista al modelo. Cómo construir un controlador simple usando las directivas ng-app, ng-controller y ng-model.
- La directiva ng-model se puede vincular a un control de entrada de "área de texto" y se pueden pasar cadenas multilínea desde el controlador a la vista.
- La directiva ng-model se puede vincular a controles de entrada como los controles de texto y casillas de verificación para hacerlos más dinámicos en tiempo de ejecución.
- La directiva ng-model también se puede utilizar para completar una lista de selección con opciones que se pueden mostrar al usuario.
