オブジェクトに配列を表示できません

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> 

しかし、これは私のために動作しません。 。

私には何が欠けていますか？第ng-repeat

について

Answer 1

、あなたはすでに繰り返されている現在のオブジェクト（アイテム）を直接第二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内の子要素と共に繰り返します。

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