Question

我正在开发一个应用程序，其中一部分应该列出来自javascript对象的人名。但是，它似乎没有像我期望的那样遍历我的json，而是返回整个事物，好像它是一个对象。为什么这样做？

Broken 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"
      }
  ];

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

Answer 1

尝试更改此内容。你在指令中定义controllerAs然后你应该在模板中使用它

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

Answer 2

您错过了将controllerAS别名放入ng-repeat。

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

Answer 3

人们包含另一个人物，所以你需要使用person.person

如下面的代码

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

检查工作plnkr

Answer 4

将people-list.html更改为

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

您需要更改

ng-repeat="person in people">

到

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

Angular ng-repeat不通过json迭代

4 个答案: