CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Kethmar Salumets
Kethmar Salumets

Reputation: 185

AngularJS ng-repeat not functioning

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>
...

Upvotes: 0

Views: 909

Answers (1)

rfornal
rfornal

Reputation: 5122

Since you are using ControllerAs functionality, try ...

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

Upvotes: 1

Related Questions