Angular ng-Wiederholung nicht durch JSON iterieren

Ich arbeite an einer App, und ein Teil davon soll die Namen von Personen aus einem Javascript-Objekt auflisten. Allerdings scheint es nicht, wie ich es erwarte, durch meinen JSON zu iterieren, stattdessen gibt es das ganze Ding zurück, als ob es ein Objekt wäre. Warum macht es das?Angular ng-Wiederholung nicht durch JSON iterieren

Gebrochene Plunker https://plnkr.co/edit/u9DHsTlaO0H2G2jqnzLa

Index.HTML

<!DOCTYPE html> 
<html ng-app="plunker"> 
    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script> 
    <script src="app.js"></script> 
    </head> 
    <body> 
    <people-list></people-list> 
    </body> 
</html>

app.js

var app = angular.module("plunker", []); 
app.directive("peopleList", function() { 
    return { 
     restrict: "E", 
     templateUrl: "people-list.html", 
     controller: function() { 
     this.people = peopleObject; 
     }, 
     controllerAs: "people" 
    }; 
    }); 

    var peopleObject = [ 
    { firstname: 'John', 
      middlename: 'K', 
      lastname: 'Doe', 
      sex: "M" 
    }, 
     { 
     firstname: 'Jane', 
      middlename: 'R', 
      lastname: 'Doe', 
      sex: "F" 
    }, 
     { 
     firstname: 'Jacob', 
      middlename: 'Harold', 
      lastname: 'Smith', 
      sex: "M" 
     } 
    ];

Menschen-list.html

<ul class="list-group menuIcons"> 
    <li ng-click="tab.setTab(1);" class="list-group-item" ng-repeat="person in people"> 
     {{person.firstname}} 
    </li> 
</ul>

Quelle

2017-03-06 Mr404servererror

Versuchen Änderung dieser. Sie definieren controllerAs in Richtlinie dann sollten Sie

<ul class="list-group menuIcons"> 
    <li ng-click="tab.setTab(1);" class="list-group-item" ng-repeat="person in people.people"> 
    {{person.firstname}} 
</li> 
</ul>

Quelle

2017-03-06 06:49:47

Darf ich fragen, zu ändern, warum hat der Benutzer Gebrauch 'this.'? und als ich versuchte, es zu entfernen, funktionierte es nicht einmal. Warum ist das so? – Smit

Das hat es geschafft, danke! Ich verstehe immer noch nicht, woher diese zusätzlichen 'Leute' kamen, obwohl – Mr404servererror

@Smit Benutzer '' ControllerAs' Syntax verwendet. –

Sie verfehlten dass in Vorlage aus controllerAS alias in ng-Wiederholung zu setzen.

<ul class="list-group menuIcons"> 
    <li ng-click="tab.setTab(1);" class="list-group-item" ng-repeat="person in people.people"> 
     {{person.firstname}} 
    </li> 
</ul>

Quelle

2017-03-06 06:53:42

Menschen enthalten ein anderes Objekt Menschen, so müssen Sie person.person

wie wie unten Code verwenden

<ul class="list-group menuIcons"> 
    <li ng-click="tab.setTab(1);" class="list-group-item" ng-repeat="person in people"> 
     {{person.firstname}} 
    </li> 
</ul>

prüfen Arbeits plnkr

Quelle

2017-03-06 06:54:26

ändern people-list.html zu

<ul class="list-group menuIcons"> 
    <li ng-click="tab.setTab(1);" class="list-group-item" ng-repeat="person in people.people"> 
     {{person.firstname}} 
     </li> 
</ul>

Sie benötigen

ng-repeat="person in people">

ng-repeat="person in people.people">

Quelle

2017-03-06 06:56:35

Angular ng-Wiederholung nicht durch JSON iterieren

Antwort

Verwandte Themen