jueves, 28 de agosto de 2025

AngularJS | Repeat

Ejemplo de ng-repeat en AngularJS

En este ejemplo veremos cómo usar el componente ng-repeat para iterar sobre listas y mostrar sus elementos dinámicamente en la vista.

1. Estructura básica de HTML

Comenzamos con un documento HTML simple:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Repeat</title>
</head>
<body>
</body>
</html>

2. Agregar AngularJS

Incluimos la librería AngularJS en la sección <head>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
        integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

3. Definir la aplicación y el controlador

Agregamos las directivas ng-app y ng-controller para indicar la aplicación y el controlador de AngularJS:

<html ng-app="myApp">
<body ng-controller="myController">

4. Crear la lista con ng-repeat

Creamos una lista desordenada (<ul>) y usamos ng-repeat para mostrar cada elemento del array de frutas:

<ul>
    <li ng-repeat="fruta in frutas">{{ fruta }}</li>
</ul>

Cómo funciona:

  • fruta in frutas indica que AngularJS recorrerá cada elemento del array $scope.frutas.

  • {{ fruta }} muestra el valor de cada elemento en la vista.

  • Si agregamos o eliminamos elementos del array, la lista se actualizará automáticamente gracias al data binding.

5. Agregar el código AngularJS

Definimos un módulo y un controlador que inicializa nuestro listado de frutas:

<script>
    var app = angular.module("myApp", []);

    app.controller("myController", function ($scope) {
        $scope.frutas = ["Manzana", "Naranja", "Plátano", "Fresa", "Uva"];
    });
</script>

6. Código completo

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Repeat</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
            integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body ng-controller="myController">

    <h2>Listado de frutas</h2>

    <ul>
        <li ng-repeat="fruta in frutas">{{ fruta }}</li>
    </ul>

    <script>
        var app = angular.module("myApp", []);

        app.controller("myController", function ($scope) {
            $scope.frutas = ["Manzana", "Naranja", "Plátano", "Fresa", "Uva"];
        });
    </script>

</body>
</html>

✅ Con este ejemplo puedes ver cómo ng-repeat permite iterar sobre un array y mostrar sus elementos automáticamente en la vista sin necesidad de código repetitivo.

en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)