使用AngularJS不返回JSON Object的子数组

时间:2014-01-15 01:37:27

标签: javascript json angularjs

我无法使用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 与我的代码放在一起。任何有关正确方向的帮助或指示都表示赞赏。

1 个答案:

答案 0 :(得分:4)

您的问题是,ng-repeat page in product.pages ng-repeat超出product in products <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>

你的HTML应该是这样的:

{{1}}

Here's a working Plunker