CODEWITHSUNDEEP
javascriptangularjs
ladanta
ladanta

Reputation: 469

Trouble with ng-repeat

I'm trying to get to grips with AngularJS and had this working to echo individual things from a controller, but when I tried to incorporate a loop with ng-repeat all I get is {{tasks.title}} flashing onscreen for a second, then a blank empty div. Any examples I've looked up seem a little different and I've tried a few ways, can anyone see where I'm going wrong?

Controller:

app.controller('MainController', ['$scope', function($scope) {
    $scope.tasklist = {
       tasks: [{
            title: 'Wash Dog'
        }, {
            title: 'Email Joe'
        }]};
    }
]);

HTML:

<section class="panel">
   <div ng-controller="MainController">
     <div class="thumbnail" ng-repeat="tasks in tasklist">
       <p>{{ tasks.title }}</p>
     </div>
   </div>
</section>

Upvotes: 1

Views: 46

Answers (1)

Peter Rasmussen
Peter Rasmussen

Reputation: 16922

You are accessing the property tasklist not the actual tasks. It should be tasklist.tasks

<section class="panel">
   <div ng-controller="MainController">
     <div class="thumbnail" ng-repeat="tasks in tasklist.tasks">
       <p>{{ tasks.title }}</p>
     </div>
   </div>
</section>

Another way would be to remove the tasks property:

app.controller('MainController', ['$scope', function($scope) {
    $scope.tasklist = [
        {
            title: 'Wash Dog'
        }, 
        {
            title: 'Email Joe'
        }
    ];
}]);

Upvotes: 3

Related Questions