AngularJS ng-repeat not functioning

Question

I am working on an angular app and as I am a beginner, I don't know all the bugs and solutions about it.

I have a code:

<tr ng-repeat="person in goal.users">
    <td>{{ person }}</td>
</tr>
{{goal.users[0]}}

Now as it can be seen - I want to print out person. For some reason, it doesn't print out my person rows. goal.users contain an array of objects.

If I simply try to print out the first array value, then it works perfectly- I get an object printed out, but not in the ng-repeat.

//Edit

Controller:

angular.module('goalCtrl', ['goalService', 'userService'])
.controller('goalCreateController', function(Goal, User) {

  var vm = this;
  // variable to hide/show elements of the view
  // differentiates between create or edit pages
  vm.type = 'create';

  User.all()
  .success(function(data) {
    // bind the users that come back to vm.users
    vm.users = data;
  });

  // function to create a Goal
  vm.saveGoal = function() {
    vm.processing = true;
    vm.message = '';
    // use the create function in the GoalService
    Goal.create(vm.goalData)
    .success(function(data) {
      vm.processing = false;
      vm.GoalData = {};
      vm.message = data.message;
    });

  };

});

Goal gets an array of objects that I get from Node server. It works because if I just console out "vm.users" in the console, then I can see the array and objects inside of it.

Can anyone help me, where I'm getting wrong?

Thank you in advance.

//Edit

The whole HTML template. Everything but the repeat works fine

<div class="page-header">
    <h1>Create User</h1>
    <tr ng-repeat="person in goal.users">
        <td>{{ person }}</td>
    </tr>
    {{goal.users[0]}}
</div>


<form class="form-horizontal" ng-submit="goal.saveGoal()">
    <div class="form-group">
        <label class="col-sm-2 control-label">Name</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" ng-model="goal.goalData.name">
        </div>
    </div>
...

Please provide your controller code as well and more specifically what value are you assigning to the $scope.goal variable. — Darin Dimitrov
– Darin Dimitrov, Commented Feb 28, 2015 at 21:29
The code you have provided for your controller doesn't seem to assign the $scope.goal variable anywhere. — Darin Dimitrov
– Darin Dimitrov, Commented Feb 28, 2015 at 21:34
@DarinDimitrov OP's is using controller as syntax, this line assigns users array: vm.users = data;. — dfsq
– dfsq, Commented Feb 28, 2015 at 21:36

bob-fornal · Accepted Answer · 2015-02-28 21:53:52Z

1

Since you are using ControllerAs functionality, try ...

<tr ng-repeat="person in vm.goal.users">
    <td>{{ person }}</td>
</tr>
{{vm.goal.users[0]}}

edited Feb 28, 2015 at 21:53

answered Feb 28, 2015 at 21:46

bob-fornal

5,1205 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

oqx Over a year ago

also remember to add vm before goal in ng-submit and ng-model for the input

Kethmar Salumets Over a year ago

Thanks, but it didn't help. {{goal.users[0]}} works as I would imagine, but the loop doesnt. {{goal.users[0]}} prints out the object, but loop doesn't.

bob-fornal Over a year ago

IN your code I don't see a goal.users attached to vm; if {{goal.users[0]}} works outside the loop, but {{vm.goal.users[0]}} does not, could it be that goal.users is attached vm incorrectly? Can you show goal from console.log at some point in your code?

Collectives™ on Stack Overflow

AngularJS ng-repeat not functioning

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related