在我的代码中使用几个嵌套的ng-repeats时遇到了很多麻烦。我有一个有几层的json对象,我试图遍历各层并显示数据。这是json的结构
{
"status": "success",
"data": {
"Mat": {
"total": 0,
"pending_devices": 0,
"individual_counts": {
"Mat1": {
"total": 0,
"pending_devices": 0,
"locations": []
},
"Mat2": {
"total": 0,
"pending_devices": 0,
"locations": [
{
"location1": 5
},
{
"location2": 2
}
]
}
}
},
"Cable": {
"total": 0,
"pending_devices": 0,
"individual_counts": {
"Flat Cable": {
"total": 0,
"pending_devices": 0,
"locations": []
},
"L Cable": {
"total": 0,
"pending_devices": 0,
"locations": [
{
"location1": 5
},
{
"location2": 2
}
]
}
}
}
}
}
这是我用来循环的代码:
<md-grid-tile ng-repeat="(key, value) in vm.counts" class="{{vm.colors[$index]}}" md-rowspan="2">
<md-grid-tile-body>
<h2>Total:{{value.total}}</h2>
<h2>Pending:{{value.pending_devices}}</h2>
<p ng-repeat="(productType, productCounts) in value.individual_counts">
<h3>{{productType}}:</h3>
<h4>Total:{{productCounts.total}}</h4>
<h4>Pending:{{productCounts.pending_devices}}</h4>
<h4>Locations:</h4>
<div ng-repeat="(location, locationCount) in productCounts.locations">
<h5>{{location}}:{{locationCount}}</h5>
</div>
</p>
</md-grid-tile-body>
<md-grid-tile-footer>
<h3>{{key}}</h3>
</md-grid-tile-footer>
</md-grid-tile>
我能够毫无问题地遍历顶层,但是没有任何东西出现在productType / ProductTypeCount循环及其下方。我输出了value.individual_counts以验证它包含正确的数据,并且确实存在。在此先感谢您的帮助。