JSON對象的子數組沒有與AngularJS一起返回

Question

我無法使用AngularJS顯示對象的子數組。

在我的app.js中，我定義了一個對象數組作爲我的主要範圍。

function MainCtrl($scope) { 
    $scope.products = [ 
    { 
     "id": "1", 
     "title": "Red Hat", 
     "sku": "Hat", 
     "thumb": "100x100", 
     "pages": [ 
      { 
       "id": "360", 
       "imgs": "01", 
       "content": "stuff" 
      }, 
      { 
       "id": "Feature", 
       "imgs": "02", 
       "content": "Feature stuff" 
      }, 
      { 
       "id": "Size", 
       "imgs": "03", 
       "content": "Data stuff" 
      } 
     ] 
    }, 
    { 
     "id": "2", 
     "title": "Blue Hat", 
     "sku": "Hat", 
     "thumb": "100x100", 
     "pages": [ 
      { 
       "id": "360", 
       "imgs": "01", 
       "content": "stuff" 
      }, 
      { 
       "id": "Feature", 
       "imgs": "02", 
       "content": "Feature stuff" 
      }, 
      { 
       "id": "Size", 
       "imgs": "03", 
       "content": "Data stuff" 
      } 
     ] 
    } 
]} 

當我嘗試顯示標題，sku和縮略圖時，一切都呈現正確。我的問題是當我嘗試顯示pages陣列。當我嘗試製作頁面列表並獲取他們的ID時，甚至沒有渲染。

<ul ng-repeat="page in product.pages"> 
     <li>{{pages.page.id}}</li> 
     <li>{{page.content}}</li> 
    </ul> 

我還是新來的角，我不確定正確的做事方式。那麼我的代碼出錯了？

我把我的代碼放在一起plunker。任何幫助或指針在正確的方向表示讚賞。

Answer 1

您的問題是您的ng-repeat對於page in product.pages超出了ng-repeat的product in products範圍。

你的HTML應該是這樣的：

<ul ng-repeat="product in products"> 
    <li>{{product.sku}}</li> 
    <li>{{product.title}}</li> 
    <li>{{product.thumb}}</li> 
    <ul ng-repeat="page in product.pages"> 
    <li>{{page.id}}</li> 
    <li>{{page.content}}</li> 
    </ul> 
</ul> 

Here's a working Plunker。