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 ，然后将其放在上面的一个标签中：

因此，您的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>

2. 您必须放置以下行：

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

在声明为ng-controller的<div>标记内。

3. 您只应使用这种方式（不使用ListController ）进行调用，并且ng-show 无需插值{{}} ：

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

我建议您看一下本教程 ，并逐步进行学习。

此外，请使用@Chev制作的代码检查此完整的演示：

演示

Answer 2

您有两个错误：

1. <div ng-controller="ListController" ng-repeat="person in persons">将ng-controller和ng-repeat分为不同的元素。 您不想重复控制器。
2. $scope.personNb = this.persons.length; this.persons不存在。
3. 您试图在底部的摘要中通过类名称ListController访问控制器。

查看我所做的更改。 点击Run code snippet以进行演示”。

 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>