Cómo usar “ng-model” en AngularJS con EJEMPLOS

¿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 simple al usuario final como la que se muestra a continuación, que le pide al usuario que introduzca los “Nombre” y “Apellido” en los cuadros de texto. Y luego quería asegurarse de almacenar la información que el usuario ha introducido 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 asegurará que los datos en la “vista” y los de su “modelo” se mantengan sincronizados todo el tiempo.

En este tutorial, usted aprenderá –

El atributo ng-model

Como se explica en la introducción a este capítulo, el atributo ng-model se utiliza para vincular los datos del modelo a la vista presentada al usuario.

El atributo ng-model se utiliza para,

  1. Controles de enlace como entrada, área de texto y selecciones en la vista en el modelo.
  2. Proporcione un comportamiento de validación: por ejemplo, se puede agregar una validación a un cuadro de texto que sólo se pueden introducir caracteres numéricos en el cuadro de texto.
  3. El atributo ng-model mantiene el estado del control (Por estado, queremos decir 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 renderiza 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 multilínea desde el controlador a la vista y adjuntar ese valor al control de área de texto.

Explicación del código:

  1. La directiva ng-model se utiliza para adjuntar la variable miembro llamada “pDescription” al control “textarea”.

La variable “pDescription” realmente contendrá el texto, que se pasará al control de área de texto. También hemos mencionado 2 atributos para el control textarea que es rows=4 y cols=50. Estos atributos han sido mencionados para que podamos mostrar múltiples líneas de texto. Al definir estos atributos, el área de texto ahora tendrá 4 filas y 50 columnas para que pueda mostrar múltiples líneas de texto.

  1. Aquí estamos adjuntando la variable miembro al objeto scope llamado “pDescription” y poniendo un valor de cadena a la variable.
  2. Tenga en cuenta que estamos poniendo el literal /n en la cadena para que el texto pueda ser de varias líneas cuando se muestra en el área de texto. El literal /n divide el texto en varias líneas para que 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.

Salida:

De la salida

  • Se puede ver claramente que el valor asignado a la variable pDescription como parte del objeto scope se pasó al control textarea.
  • Posteriormente, se muestra 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 radio, etc.

Veamos un ejemplo de cómo podemos usar el modelo ng-con el tipo de entrada “textbox” y “checkbox”.

Aquí tendremos un tipo de entrada de texto que tendrá el nombre de “Guru99” y habrá 2 casillas de verificación, una que será marcada por defecto y la otra no será marcada.

Explicación del código:

  1. La directiva ng-model se utiliza para adjuntar la variable miembro llamada “pname” al control de texto de 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.
  2. Aquí estamos definiendo nuestra primera casilla de verificación “Controllers” que se adjunta a la variable miembro Topics.Controllers. La casilla de verificación se marcará para este control de verificación.
  3. 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 se marcará para este control de comprobación.
  4. Aquí estamos adjuntando la variable miembro llamada “pName” y poniendo un valor de cadena de “Guru99”.
  5. Estamos declarando una variable de matriz miembro llamada “Temas” y dándole dos valores, el primero es “verdadero” y el segundo es “falso”.

Por lo tanto, cuando la primera casilla de verificación obtiene el valor de true, la casilla de verificación se marcará para este control, y del mismo modo, 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 su código en el navegador.

Salida:

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” que pasó, la casilla de verificación está marcada para la casilla de verificación “Controladores”. Del mismo modo, dado que el segundo valor es falso, la casilla de verificación no está marcada para la casilla de verificación “Modelos”.

3) Seleccionar elemento formulario desplegable

La directiva ng-model también se puede aplicar al elemento select y se puede utilizar para rellenar los elementos de 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”.

  1. La directiva ng-model 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, estamos adjuntando la variable miembro de temas.Option1 para la primera opción y temas.Option2 para la segunda opción.
  2. Aquí estamos definiendo nuestra variable de matriz 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 correctamente, se mostrará la siguiente salida.

Salida:

De la salida, se puede ver que el valor asignado a la variable pName es “Guru99” y podemos ver que el control de entrada seleccionado 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 las cadenas de líneas múltiples se pueden pasar 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 rellenar una lista de selección con opciones que se pueden mostrar al usuario.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *