Veremos el funcionamiento de la directiva ng-repeat de angular, el cual nos permite iterar sobre un elemento en múltiples ocasiones, facilitando al recorrido de objetos que contengan una serie de datos y que nosotros ocupemos mostrar o adquirir alguno de estos.
Suponiendo que tenemos el siguiente objeto y queremos mostrarlo en el navegador:
Nota: el ejemplo es muy simple pero no deja de ser interesante.
$scope.libros = [
{
autor: 'Nombre Autor 1',
libro:'Nombre del libro 1'
},
{
autor: 'Nombre Autor 2',
libro:'Nombre del libro 2'
},
{
autor: 'Nombre Autor 3',
libro:'Nombre del libro 3'
}
];
Primeramente tenemos que crear nuestro html con las directivas correspondientes y hacer instancia de un controlador como se muestra en el siguiente ejemplo:
Nota: recuerden hacer instancia de AngularJS ya sea por CDN o por un archivo local y de igual forma el archivo en donde declaran el modulo y el controlador:
Nota: recuerden hacer instancia de AngularJS ya sea por CDN o por un archivo local y de igual forma el archivo en donde declaran el modulo y el controlador:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title> ng-repeat -> AngularJS </title>
<!-- Aquí esta la referencia de ANGULARJS -->
<!-- La ubicación puede varia a la de ustedes -->
<script src="./vendors/angular.min.js"></script>
<!-- Aquí instanciamos el archivo que tendra nuestro modulo y controlador-->
<!-- El archivo lo declararemos mas abajo con el nombre de app.js-->
<script src="./vendors/js/app.js"></script>
</head>
<body ng-app="app"><!-- Direcctiva para inicializar una aplicación angular-->
<div ng-controller="Ctrl1"><!-- Ahora declaramos nuestro controlador -->
</div>
</body>
</html>
Ahora que ya tenemos nuestro html casi listo crearemos el archivo app.js el cual tendrá el objeto con los datos que mencionamos mas arriba, el modulo y nuestro controlador:
Bueno espero que les sirva, si tienen alguna duda no duden en comentar.
Saludos!!
angular.module('app', []) // recuerda poner el nombre del modulo igual al del ng-app del html
.controller('Ctrl1', ['$scope', function ($scope) {
$scope.libros = [
{
autor: 'Nombre Autor 1',
libro:'Nombre del libro 1'
},
{
autor: 'Nombre Autor 2',
libro:'Nombre del libro 2'
},
{
autor: 'Nombre Autor 3',
libro:'Nombre del libro 3'
}
];
}])
Ahora solo falta agregar el tag en el html en donde se verán los datos, el código quedará de la siguiente manera:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title> ng-repeat -> AngularJS </title>
<script src="./vendors/angular.min.js"></script>
<script src="./vendors/js/app.js"></script>
</head>
<body ng-app="app">
<div ng-controller="Ctrl1">
<h3>ng-repeat</h3>
<!-- Dentro de este div se reflejaran los datos y aquí declaramos nuestra directiva ng-repeat -->
<div ng-repeat="item in libros">
<span>Autor: </span>{{item.autor}}
<span>Libro: </span>{{item.libro}}
</div>
</div>
</body>
</html>
Si todo sale bien, el resultado en nuestro navegador será el siguiente:
Saludos!!