Question

我有一个应用，其中对我的API的调用返回一个对象，该对象也包含一个对象数组。

本质：

   {
      "_id": "587bc430e64e9f28a6894dd4",
      "lastname": "Lane",
      "firstname": "Panny",
      "__v": 0,
      "contacts": [
         {
            "name": "rick jevers",
            "age": 25,
            "_id": "587bc430e64e9f28a6894dd5"
         }
      ]
   },

我认为在数组中显示对象的方法是使用另一个ng-repeat，如下所示：

<div class="col-md-12" style="clear:both; padding:30px;">
      <ul style="list-style: none">
      <li ng-repeat="item in sample.post">
        <strong>
          {{item.firstname}} {{item.lastname}}
        </strong>  
        <ul style="list-style: none;">
          <li ng-repeat="contact in sample.post.contacts">
            {{contact.name}}
          </li>
        </ul>
      </li>
    </ul>
</div>

但这对我没用。

我错过了什么？

Answer 1

对于第二个ng-repeat，你已经在另一个ng-repeat内，这意味着你已经有了重复的当前对象（item），例如数组中的第一个对象，例如，直接在第二个ng-repeat中使用它，如下所示：

<ul style="list-style: none;">
      <li ng-repeat="contact in item.contacts">
        {{contact.name}}
      </li>
    </ul>

工作演示：

angular.module('app', [])
 .controller('myCtrl', function ($scope) {
 $scope.sample = {};
  $scope.sample.post = [{
      "_id": "587bc430e64e9f28a6894dd4",
      "lastname": "Lane",
      "firstname": "Panny",
      "__v": 0,
      "contacts": [
         {
            "name": "rick jevers",
            "age": 25,
            "_id": "587bc430e64e9f28a6894dd5"
         }
      ]
   }]
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <div class="col-md-12" style="clear:both; padding:30px;">
      <ul style="list-style: none">
      <li ng-repeat="item in sample.post">
        <strong>
          {{item.firstname}} {{item.lastname}}
        </strong>  
        <ul style="list-style: none;">
          <li ng-repeat="contact in item.contacts">
            {{contact.name}}
          </li>
        </ul>
      </li>
    </ul>
</div>
</div>

Answer 2

要解决此问题，您需要找出为什么它不适合您。 ng-repeat遍历数组，对于数组中的每个项目，它会重复元素及其在DOM中的子元素。

当您编写第一个ng-repeat时，您将在主数组上进行迭代，其中包含所有人员详细信息。在下一步中，每个此类对象中都有contacts数组，即您希望在同一对象contacts中进行迭代。

接受你的意见：

[
{
      "_id": "587bc430e64e9f28a6894dd4",//person 1
      "lastname": "Lane",
      "firstname": "Panny",
      "__v": 0,
      "contacts": [
         {
            "name": "rick jevers",
            "age": 25,
            "_id": "587bc430e64e9f28a6894dd5"
         }
      ]
   }, 
{
//person 2
}, {
//person 3
}

所以你的第一个ng-repeat将在这个数组上。接下来是contact，它位于同一个对象中，因此您需要在ng-repeat上contacts，但在同一个对象中。

<div class="col-md-12" style="clear:both; padding:30px;">
  <ul style="list-style: none">
  <li ng-repeat="item in sample.post">
    <strong>
      {{item.firstname}} {{item.lastname}}
    </strong>  
    <ul style="list-style: none;">
      <li ng-repeat="contact in item.contacts"><!--iterate over item's contact-->
        {{contact.name}}
      </li>
    </ul>
  </li>
</ul>

无法在对象

2 个答案: