Ng-repeat doesn't work AngularJs

Question

New at Angular, I spent 2 hours searching my error, helped by a few docs and watching the already existing posts but nothing to do..

I'm just hard declaring an object array and try to loop through it:

Code:

angular.module('MyAppModule', [ ])

.controller('GreetsController', ['$scope', function ($scope) {
  $scope.name = prompt('What\'s your name ?');
}])

.controller('ListController', ['$scope', function ($scope) {
  $scope.personNb = this.persons.length;

  $scope.persons = [
    {
      image: 'images/images(1).jpg',
      name: 'John Doe',
      age: 23
    },
    {
      image: 'images/images.jpg',
      name: 'John Doe',
      age: 23
    },
    {
      image: 'images/téléchargement.jpg',
      name: 'John Doe',
      age: 23
    },
    {
      image: 'images/téléchargement(1).jpg',
      name: 'John Doe',
      age: 23
    }
  ];
}]);

Html:

<div ng-controller="GreetsController">
  <h1>Coding with AngularJs</h1>
  <h2 ng-show="name">{{"Welcome " + name + " !"}}</h2>
</div>

<div ng-controller="ListController" ng-repeat="person in persons">
  <h3>{{person.name}}</h3>
  <h3>{{person.age}}</h3>
</div>

{{ListController.persons[0].age}}
<h3 ng-show="{{ListController.person_nb}}">There is a total of {{ListController.person_nb}} register</h3>

I didn't captured it but all the scripts are includes and I add 'MyAppModule' in the depedencies array of app.js

what does this.persons refer to? Are there any script errors? — Pavan Andhukuri
– Pavan Andhukuri, Commented Jul 11, 2016 at 16:37
You have multiple issues with your code, really too many to correct in one answer. I'll try to offer a few here, though; 1. you can't add ng-controller and ng-repeat on the same element, since that element is the one that is repeated. 2. you are trying to call ListController.person_nb in HTML, which will not work. 3. your ng-show is taking a number and checking true/false for it, which makes no sense. 4. you try to get a length before you even have an array, and you are trying to get the length of an array on this, instead of $scope. — Claies
– Claies, Commented Jul 11, 2016 at 16:44
with this many errors, you should take some time to examine the console log in the browser and eliminate the errors individually. — Claies
– Claies, Commented Jul 11, 2016 at 16:45

developer033 · Accepted Answer · 2016-07-11 16:43:46Z

You have 3 mistakes in your HTML:

You must declare your ng-app before calling your controller(s), then put this in one tag above:

So, your HTML becomes this:

<div ng-app="MyAppModule">
  <div ng-controller="GreetsController">
    <h1>Coding with AngularJs</h1>
    <h2 ng-show="name">{{"Welcome " + name + " !"}}</h2>
  </div>

  <div ng-controller="ListController" ng-repeat="person in persons">
    <h3>{{person.name}}</h3>
    <h3>{{person.age}}</h3>
  </div>

  {{ListController.persons[0].age}}
  <h3 ng-show="{{ListController.person_nb}}">There is a total of {{ListController.person_nb}} register</h3>
</div>

You must put these lines:

{{ListController.persons[0].age}}
<h3 ng-show="{{ListController.person_nb}}">There is a total of {{ListController.person_nb}} register</h3>

inside the <div> tag that is declared your ng-controller.

You you should only call this way (without the ListController) and also ng-show works without interpolation {{}}:

{{persons[0].age}}
<h3 ng-show="person_nb">There is a total of {{person_nb}} register</h3>

I recommend you to take a look on this tutorial and follow it step by step.

Also, check this complete demo with your code, made by @Chev:

DEMO

Sweet, I was going to make an answer but you covered all the same issues I fixed in the demo before I could post it :)

Martin · Accepted Answer · 2016-07-11 16:53:01Z

You had two errors:

<div ng-controller="ListController" ng-repeat="person in persons"> Break the ng-controller and ng-repeat into different elements. You don't want to repeat the controller.
$scope.personNb = this.persons.length; this.persons does not exist.
The summary at the bottom you are trying to access the controller by its class name ListController.

See the changes I made. click Run code snippet for a demo.

angular.module('MyAppModule', [ ])

.controller('GreetsController', ['$scope', function ($scope) {
  $scope.name = "";
  $scope.name = prompt('What\'s your name ?');
}])

.controller('ListController', ['$scope', function ($scope) {
  
  $scope.persons = [
    {
      image: 'images/images(1).jpg',
      name: 'John Doe',
      age: 23
    },
    {
      image: 'images/images.jpg',
      name: 'John Doe',
      age: 23
    },
    {
      image: 'images/téléchargement.jpg',
      name: 'John Doe',
      age: 23
    },
    {
      image: 'images/téléchargement(1).jpg',
      name: 'John Doe',
      age: 23
    }
  ];
  
  $scope.personNb = $scope.persons.length;
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyAppModule">
<div ng-controller="GreetsController">
  <h1>Coding with AngularJs</h1>
  <h2 ng-show="name">Welcome {{name}}!</h2>
</div>

<div ng-controller="ListController">
  <div ng-repeat="person in persons">
    <h3>{{person.name}}</h3>
    <h3>{{person.age}}</h3>
  </div>
  
  {{persons[0].age}}
<h3 ng-show="{{personNb}}">There is a total of {{personNb}} register</h3>
</div>
  
</div>

Thank you very much for all the quick answers, it works now :)

Collectives™ on Stack Overflow

Ng-repeat doesn't work AngularJs

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related