Directiva AngularJS ng-repeat con ejemplo

Visualización de información repetida

A veces, es posible que se nos solicite mostrar una lista de elementos en la vista, por lo que la pregunta es cómo podemos mostrar una lista de elementos definidos en nuestro controlador en nuestra página de vista.

Angular proporciona una directiva llamada "ng-repeat" que se puede usar para mostrar valores repetidos definidos en nuestro controlador.

Veamos un ejemplo de cómo podemos lograrlo.

Event Registration


Guru99 Global Event




Topics


    

  • {{tpname.name}}
    •

Explicación del código:

  1. En el controlador, primero definimos nuestra matriz de elementos de la lista que queremos definir en la vista. Aquí hemos definido una matriz llamada "TopicNames" que contiene tres elementos. Cada elemento consta de un par nombre-valor.
  2. La matriz de TopicsNames luego se agrega a una variable miembro llamada "temas" y se adjunta a nuestro objeto de alcance.
  3. Estamos usando las etiquetas HTML de
      (Lista desordenada) y
    • (Elemento de lista) para mostrar la lista de elementos en nuestra matriz. Luego usamos la directiva ng-repeat para revisar todos y cada uno de los elementos de nuestra matriz. La palabra "tpname" es una variable que se usa para señalar cada elemento en la matriz de temas.
    • En esto, mostraremos el valor de cada elemento de la matriz.

Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador. Verá todos los elementos de la matriz (básicamente los TopicNames en los temas) mostrados.

Producción:

Controladores múltiples de Angularjs

Un ejemplo de controlador avanzado sería el concepto de tener varios controladores en una aplicación JS angular.

Es posible que desee definir varios controladores para separar diferentes funciones de lógica empresarial. Anteriormente mencionamos acerca de tener diferentes métodos en un controlador en el que un método tenía una funcionalidad separada para sumar y restar números. Bueno, puede tener varios controladores para tener una separación lógica más avanzada. Por ejemplo, puede tener un controlador que solo realice operaciones con números y el otro que realice operaciones con cadenas.

Veamos un ejemplo de cómo podemos definir varios controladores en una aplicación angular.JS.

Event Registration


Guru99 Global Event


{{lname}}

Explicación del código:

  1. Aquí estamos definiendo 2 controladores llamados "firstController" y "secondController". Para cada controlador también estamos agregando algún código para su procesamiento. En nuestro firstController, adjuntamos una variable llamada "pname" que tiene el valor "firstController", y en el secondController adjuntamos una variable llamada "lname" que tiene el valor "secondController".
  2. En la vista, estamos accediendo a ambos controladores y usando la variable miembro del segundo controlador.

Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador. Verá todo el texto de "secondController" como se esperaba.

Producción:

Resumen

  • La directiva ng-repetater se puede utilizar para mostrar varios elementos repetidos.
  • También echamos un vistazo a un controlador avanzado que analizaba la definición de varios controladores en una aplicación.

Articulos interesantes...