Вывод массива в AngularJS « Марк и Марта.Ру. Записки отца-программиста

Вывод массива в AngularJS

Средствами 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;
});

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>

<thead>

<tr>

<th>Место</th>

<th>Количество Century</th>

</tr>

</thead>

<td>{{snookerPlayer.place}}</td>

<td>{{snookerPlayer.name}}</td>

<td>{{snookerPlayer.centuries}}</td>

</tr>

</table>

</div>

Tвитнуть

4 мая 2016, Alexey
Javascript
Тэги: AngularJS, javascript
Комментарии: (0)

Вывод массива в AngularJS

Комментариев нет »

Leave a comment

Похожие записи

Популярное за месяц

Новое на сайте

Популярное за 24 часа

Вывод изображения в AngularJS без ошибок