¿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, suponga que desea presentar una página simple al usuario final como la que se muestra a continuación, que le pide al usuario que ingrese el "Nombre" y el "Apellido" en los cuadros de texto. Y luego quería asegurarse de almacenar la información que el usuario ingresó en su modelo de datos.
Puede usar 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.
En este tutorial, aprenderá:
- El atributo ng-model
- Cómo usar ng-model
- Área de texto
- Elementos de entrada
- Seleccionar elemento de formulario desplegable
El atributo ng-model
Como se discutió en la introducción de este capítulo, el atributo ng-model se usa para vincular los datos en su modelo a la vista presentada al usuario.
El atributo ng-model se utiliza para,
- Enlazar controles como entrada, área de texto y selecciones en la vista en el modelo.
- Proporcione un comportamiento de validación; por ejemplo, se puede agregar una validación a un cuadro de texto en el que solo se pueden ingresar caracteres numéricos en el cuadro de texto.
- El atributo ng-model mantiene el estado del control (por estado, nos referimos a que el control y los datos están obligados a mantenerse siempre sincronizados. Si el valor de nuestros datos cambia, cambiará automáticamente el valor en el control y viceversa)
Cómo usar ng-model
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 un número ilimitado de caracteres y el texto se representa en una fuente de ancho fijo.
Así que 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 de varias líneas desde el controlador a la vista y adjuntar ese valor al control del área de texto.
Event Registration Guru99 Global Event
Explicación del código:
- La directiva ng-model se usa para adjuntar la variable miembro llamada "pDescription" al control "textarea".
La variable "pDescription" contendrá realmente 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 es rows = 4 y cols = 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 poniendo 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 se pueda representar en el control de á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.
Producción:
De la salida
- Puede verse claramente que el valor asignado a la variable pDescription como parte del objeto de alcance se pasó al control textarea.
- Posteriormente, se ha mostrado cuando se carga 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 usar 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.
Event Registration Guru99 Global Event
Explicación del código:
- La directiva ng-model se usa 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í estamos definiendo nuestra primera casilla de verificación "Controladores" que se adjunta a la variable miembro Topics.Controllers. La casilla de verificación estará marcada para este control de verificación.
- Aquí estamos definiendo nuestra primera casilla de verificación "Modelos" que se adjunta a la variable miembro Topics.Models. La casilla de verificación no estará marcada para este control de verificación.
- Aquí estamos adjuntando la variable miembro llamada "pName" y poniendo un valor de cadena de "Guru99".
- Declaramos una variable de matriz de miembros 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 de 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á el siguiente resultado cuando ejecute su código en el navegador.
Producción:
De la salida,
- Se puede ver claramente que el valor asignado a la variable pName es "Guru99"
- Dado que el primer valor de verificación es "verdadero", la casilla de verificación está marcada para la casilla de verificación "Controladores". Asimismo, dado que el segundo valor es falso, la casilla de verificación no está marcada para la casilla de verificación "Modelos".
3) Seleccione el menú desplegable del formulario del elemento
La directiva ng-model también se puede aplicar al elemento de selección y se puede utilizar 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 select.
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".
Event Registration Guru99 Global Event
- La directiva ng-model se usa 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 de temas 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 para seleccionar la etiqueta de entrada en la vista.
Si el código se ejecuta con éxito, se mostrará la siguiente salida.
Producción:
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 propósito 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 de varias líneas desde el controlador a la vista.
- La directiva ng-model se puede vincular a controles de entrada como el texto y los controles de casilla 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.
