En el tutorial anterior vimos como desplegar información sencilla usando la directiva ng-repeat, en esta ocasión veremos como desplegar una colección con objetos más complejos, algo más real que usaremos para nuestra aplicación final.

Primero vamos a crear la información que necesitamos desplegar, para este ejemplo desplegaremos un listado de nuestros sitios favoritos, vamos a crearla en el controlador de la siguiente manera.

(function(){
    "use strict";

    angular.module('Bookmarks',[
        //dependencies here
    ])

    .controller('MainController',function($scope){
        $scope.name = 'Carl'
        $scope.categories = ['HTML5','JavaScript','CSS','Games'];
        $scope.bookmarks = [ //<--- Adding the data
            {id:1,name:'Quizzpot.com',url:'https://quizzpot.com',category:'JavaScript'},
            {id:2,name:'Html5 Game Devs',url:'https://html5gamedevs.com',category:'Games'},
            {id:3,name:'CSS Tricks',url:'http://css-tricks.com',category:'CSS'},
            {id:4,name:'Bootstrap',url:'http://getbootstrap.com',category:'CSS'},
            {id:5,name:'Card',url:'http://jessepollak.github.io/card/',category:'JavaScript'}
        ];
    });

})();

Como se puede observar, estamos creando un arreglo con objetos que contienen la información que necesitamos desplegar, cada objeto tiene un id, name, url y category. Lo siguiente es desplegar estos objetos en nuestro template de la siguiente manera.

<!DOCTYPE html>
<html ng-app="Bookmarks">
<head>
    <title>Installation - Angular JS</title>
</head>
<body ng-controller="MainController">

    <div>
        <h1>Welcome {{name}}</h1>

        <ul>
            <li ng-repeat="category in categories">{{category}}</li>
        </ul>

        <ul>
            <li ng-repeat="bookmark in bookmarks"> <!-- Step 1 -->
                <p>
                    <!-- Step 2 -->
                    <a href="/courses/introduccion-a-angular-js/articles/%7B%7Bbookmark.url%7D%7D/">{{bookmark.name}}</a><br/>
                    <small>{{bookmark.url}}</small>
                </p>
            </li>
        </ul>
    </div>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
    <script type="text/javascript" src="/courses/introduccion-a-angular-js/articles/js/app.js"></script>
</body>
</html>

1. En el paso uno estamos usando la directiva ng-repeat, ya vimos que esta directiva nos repite los nodos del DOM por cada elemento en la colección que iterará, en este caso la colección bookmarks.
2. En el paso dos imprimimos la información de cada elemento en la colección, para acceder a las propiedades de cada objeto usamos un punto (.), igual como se acceden los objetos en JavaScript.

Si refrescamos nuestro navegador veremos algo como la siguiente imagen.

Ya estamos desplegando la información de nuestro controlador en el view. Todo esto lo hicimos usando el objeto $scope para agregar la colección de objetos y luego usamos la directiva ng-repeat en nuestro template.

Te recomiendo experimentar con los templates, intenta agregar más propiedades a los objetos y desplegarlas en el template. Intenta agregar una colección dentro de los objetos y luego imprime la colección por cada uno de los elementos que hemos desplegado hasta ahora.

En el próximo tutorial veremos como filtrar la información por categoría, haremos que cuando el usuario de click sobre una categoría, se muestren solo los links que pertenecen a esa categoría.

Puedes ver el resultado de este tutorial, al registrarte en el sitio también puedes descargar el código fuente y el video. Agradecería mucho recomendaras este tutorial en tus redes sociales, me ayudarias mucho a difundir este material.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Introducción a Angular JS, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!