Динамически построенное меню в Angular

Question

Вот мои настройки:

У меня есть таблица Dynamo DB с 3 элементами в ней; каждый элемент представляет собой одну ссылку в меню. Я создал простую лямбда-функцию для сканирования таблицы и возврата ответа json через шлюз API.

В моем приложении angular два контроллера:

1. один для контента
2. один для навигации

Вот контроллер, который генерирует навигационные ссылки:

app.controller('menu', function($scope, $http) {
    $http.get('api address').
        then(function(response) {
            for(let i = 0; i < response.data.body.length; i++){
                ($scope.menu = response.data.body[i]['course-lesson']);
                console.log($scope.menu)
            }
        });
});

У меня есть процесс, работающий по мере необходимости, но только регистрирующий вывод на консоль для тестирования. Когда это выполняется, в консоль записывается следующее:

Lesson One 
Lesson Two 
Lesson Three

Как я уже говорил, содержимое корректно, но я не уверен, как воспроизвести этот же вывод в div внутри контроллера следующим образом:

<div ng-controller="menu">
    <ul><li>{{ menu }}</li></ul>
</div>

Как записать вывод l oop в div контроллера меню (вместо консоли), чтобы я мог использовать каждый «урок» в качестве ссылки?

Answer 1

Назначьте массив для свойства области:

app.controller('menu', function($scope, $http) {
    $http.get('api address')
    .then(function(response) {
        $scope.bodyArr = response.data.body; 
    });
});

Используйте директиву ng-repeat:

<div ng-controller="menu">
    <ul>
        <li ng-repeat="item in bodyArr">{{ item['course-lesson'] }}</li>
    </ul>
</div>

Для получения дополнительной информации см.

• AngularJS ng-repeat Директива API Reference