Ng-Wiederholung funktioniert nicht AngularJS

Question

Neu bei Angular, verbrachte ich 2 Stunden meinen Fehler suchen, um ein paar docs geholfen und beobachtete die bereits bestehenden Stellen, aber nichts zu tun ..

Ich bin nur schwer zu erklären ein Objekt-Array und versuchen, eine Schleife durch sie:

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> 

Ich habe es nicht gefangen, sondern alle Skripte enthält und ich füge hinzu 'MyAppModule' im depedencies Array von app.js

Answer 1

Sie haben zwei Fehler:

1. <div ng-controller="ListController" ng-repeat="person in persons"> brechen ng-Controller und ng- wiederhole es in verschiedene Elemente. Sie möchten den Controller nicht wiederholen.
2. $scope.personNb = this.persons.length; this.persons existiert nicht.
3. Die Zusammenfassung unten versucht, auf den Controller über den Klassennamen ListController zuzugreifen.

Siehe die Änderungen, die ich vorgenommen habe. Klicken Sie auf Run code snippet für eine 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>

Answer 2

Sie haben 3 Fehler in Ihrem HTML:

1. Sie müssen erklären, um Ihre ng-app vor dem Controller (n) aufrufen, dann ist dieses oben in einem Tag setzen:

So, Ihr HTML wird dies:

<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. Sie diese Zeilen setzen müssen:

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

innen das <div>-Tag, das Ihredeklariert ist.

3. Sie nur auf diese Weise (ohne die ListController) und auch ng-Show arbeitet ohne Interpolation {{}} nennen sollte:

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

Ich empfehle Sie sehen sich diese tutorial an und folgen sie Schritt für Schritt.

Überprüfen Sie auch diese komplette Demo mit Ihrem Code, hergestellt von @Chev:

DEMO