Средствами AngularJS можно выводить массивы данных, полученных в Javascript коде. Так, можно динамически генерировать таблицы данных.

Рассмотрим циклический вывод массива средствами AngularJS.

Для примера – таблица из 5 снукеристов, сделавших сотенную серию (Century). Массив для таблицы формируется в Javascript, вывод – в html-коде.

 

Код Javascript:

var myApp = angular.module("photoGallery", []);
myApp.controller("snookerPlayersList", function ($scope) {
    var snookerPlayers = [
        { place: 1, name: "Ронни О'Салливан", centuries: 820 }, 
        { place: 2, name: "Стивен Хендри",  centuries:775}, 
        { place: 3, name: "Джон Хиггинс",  centuries:603},
        { place: 4, name: "Нил Робертсон",  centuries:421},
        { place: 5, name: "Дин Джуньху",  centuries:385}

    ];
    $scope.snookerPlayers = snookerPlayers;
});

 

Html-код страницы:

    <div ng-controller="snookerPlayersList">
        <table border="1">
            <thead>
                <tr>
                    <th>Место</th>
                    <th>Имя</th>
                    <th>Количество Century</th>
                </tr>
            </thead>
            <tr ng-repeat="snookerPlayer in snookerPlayers">

                <td>{{snookerPlayer.place}}</td>
                <td>{{snookerPlayer.name}}</td>
                <td>{{snookerPlayer.centuries}}</td>
            </tr>
        </table>
    </div>