javascript - AngularJS 不返回 JSON 对象的子数组

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>

我对 Angular 还是个新手，我不确定做事的正确方法。那么我的代码哪里出错了？

我整理了一个 plunker 用我的代码。感谢您提供正确方向的任何帮助或指示。

Answer 1

您的问题是您的 ng-repeat for product.pages 中的页面不在您的 ng-repeat for product在产品中。

您的 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 .