我无法用 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 和我的代码放在一起。任何正确方向的帮助或指示将不胜感激。
您的问题是您对page in product.pages
ng-repeat
超出了您的product in products
ng-repeat
。
你的 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>
这是一个工作的Plunker。