javascript - ngRepeat 迭代 AngularJS 中的数组对象

Question

我正在尝试弄清楚如何使用 ngrepeat 迭代数组

如果我有如下所示的数据数组

{
  "People": [{
      "name": "Andrew Amernante",
      "rating": 3,
    },
    {
      "name": "Frank Wang",
      "rating": 5,
    },
    {
      "name": "Chang Wang",
      "rating": 5,
    }
  ]
}

在 Controller 中，我有这些代码片段。

app.controller('mainController', function($scope, $http) {
  $http.get('people.json').
  then(function onSuccess(response) {
    console.log(response);
    $scope.peoples = response.data;

  }).
  catch(function onError(response) {
    console.log(response);
  });
});

而且，我想迭代数组并在列表中显示三个名称。

<ul class="nav">
  <li ng-repeat="obj.peoples track by $index">
    <a href="#/">{{obj.name}}</a>
  </li>
</ul>

但是，我无法获取名字，对此有什么想法吗？

仅供引用 - 我在这里使用 Angular 1.6.5 版本。

Plunkr代码在这里

Answer 1

您需要修复 HTML 代码。

而不是 ng-repeat="obj.peoples track by $index" 应该是 ng-repeat="obj in peoples.People track by $index"

请参阅下面的演示。

angular.module('app', [])
  .controller('mainController', function($scope, $http) {
    // mocked, equivalente to `$scope.peoples = response.data`
    $scope.peoples = {
      "People": [{
          "name": "Andrew Amernante",
          "rating": 3,
        },
        {
          "name": "Frank Wang",
          "rating": 5,
        },
        {
          "name": "Chang Wang",
          "rating": 5,
        }
      ]
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='mainController'>
  <ul class="nav">
    <li ng-repeat="obj in peoples.People track by $index">
      <a href="#/">{{obj.name}}</a>
    </li>
  </ul>

</div>