javascript - NG-repeat 不起作用 AngularJs

Question

新加入 Angular，我花了 2 个小时搜索我的错误，在一些文档的帮助下并观看了已经存在的帖子，但无事可做。

我只是很难声明一个对象数组并尝试循环它:

代码:

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>

我没有捕获它，但所有脚本都包含在内，并且我在 app.js 的依赖项数组中添加了“MyAppModule”

Answer 1

您的 HTML 中有 3 个错误:

1. 您必须声明您的 ng-app在调用您的 Controller 之前，请将其放入上面的一个标签中:

因此，您的 HTML 变为:

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

您必须输入以下几行:

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

里面<div>声明为您的标签 ng-controller .

你应该只以这种方式调用(没有 ListController )，并且 ng-show 也可以没有插值 {{}} :

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

我建议你看看这个tutorial并一步步遵循。

另外，请使用您的代码检查这个完整的演示，由 @Chev 制作:

DEMO