CODEWITHSUNDEEP
angularjsamazon-dynamodb
DataGuy
DataGuy

Reputation: 1725

Dynamically Built Menu in Angular

Here is my setup:

I have a Dynamo DB table with 3 items in it; each item represents one link in a menu. I have created a simple Lambda function to scan the table and return a json response via API gateway.

I am two controllers in my angular app:

  1. one for content
  2. one for navigation

Here is the controller that generates the navigation links:

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)
            }
        });
});

I have the process working as needed, but only logging the output to the console for testing. When this runs, the following is logged to the console:

Lesson One 
Lesson Two 
Lesson Three

As I mentioned, the content is correct, but I am unsure how to reproduce this same output in a div within the controller as follows:

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

How do I write the output of the loop to the menu controller div (instead of the console) so I can use each 'lesson' as a link?

Upvotes: 0

Views: 60

Answers (1)

georgeawg
georgeawg

Reputation: 48968

Assign the array to a scope property:

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

Use the ng-repeat directive:

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

For more information, see

Upvotes: 1

Related Questions