AngularJS: JSON - ng-repeat

by Alberto Naperi Jr.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-controller="YourCtrl">
    <div class="col-md-2">
        <ul class="nav nav-pills nav-stacked" ng-repeat="x in menuitems track by $index">
            <li>{{x}}</li>
        </ul>
    </div>
    
    <button id="get-items-button" ng-click="getItems()">Get Items</button>
    <p>Look at the list of items!</p>
    <!--this table shows the items we get from our service-->
    <table cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>Description</th>
                <th>Done</th>
                <th>Title</th>
                <th>URI</th>                    
            </tr>
        </thead>
        <tbody>
            <!--repeat this table row for each item in items-->
            <tr ng-repeat="task in tasks">
                <td>{{task.description}}</td>
                <td>{{task.done}}</td>
                <td>{{task.title}}</td>
                <td>{{task.uri}}</td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

'use strict';
var app = angular.module('myApp', []);
app.controller('YourCtrl', ['$scope', function($scope) {
    
        $scope.menuitems = ['Home','About','Index'];

        $scope.tasks =
                {
                    "tasks":
                            [
                                {
                                    "description": "Milk, Cheese, Pizza, Fruit, Tylenol",
                                    "done": false,
                                    "title": "Buy groceries",
                                    "uri": "http://127.0.0.1:5000/todo/api/v1.0/tasks/1"
                                },
                                {
                                    "description": "Need to find a good Python tutorial on the web",
                                    "done": false,
                                    "title": "Learn Python",
                                    "uri": "http://127.0.0.1:5000/todo/api/v1.0/tasks/2"
                                }
                            ]
                };

        $scope.updateUser = function(userId) {
            console.log(userId);
            $scope.selectedUserId = userId;
        };

        console.log($scope.users);

    }]);