無法在對象中顯示陣列

Question

我有一個應用程序，其中對我的API的調用返回一個也包含對象數組的對象。

本質：

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

我以爲來顯示陣列中的對象的方法是使用另一個NG重複，像這樣：

<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，這意味着您已經有正被重複說陣列例如在第一個目的，因此，直接使用它在第二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，這是在同一個對象中，所以你需要在contacts上做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 item.contacts"><!--iterate over item's contact--> 
     {{contact.name}} 
     </li> 
    </ul> 
    </li> 
</ul>