AngularJS ng-repeat Directiva con Ejemplo

Visualización de información repetida

A veces es posible que tengamos que 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 lograr esto.

Explicación del código:

  1. En el controlador, primero definimos nuestra matriz de elementos de 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 se agrega a una variable miembro llamada “topics” y se adjunta a nuestro objeto de alcance.
  3. Estamos utilizando las etiquetas HTML de <ul>(Lista desordenada) y <li>(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 utiliza para apuntar a cada elemento de la matriz temas.TopicNames.
  4. En esto, vamos a mostrar el valor de cada elemento de matriz.

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

Salida:

Angularjs Múltiples Controladores

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

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

Veamos un ejemplo de cómo podemos definir múltiples controladores en una aplicación Angular.js.

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á la siguiente salida cuando ejecute su código en el navegador.Verá todo el texto de “SecondController” como se esperaba.

Salida:

Resumen

  • La directiva ng-repeater se puede utilizar para mostrar varios elementos repetidos.
  • También echamos un vistazo a un controlador avanzado que miraba la definición de múltiples controladores en una aplicación.
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 *