Ng-repeat不适用于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

Answer 1

You have 3 mistakes in your HTML:

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

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

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

Answer 2

You had two errors:

1. <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.
2. $scope.personNb = this.persons.length; this.persons does not exist.
3. 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>