当我尝试在 Angular JS 应用程序中迭代对象数组时遇到问题。 不明白为什么当 ng-repeat 运行时我的 DOM 中会出现一些空的 HTML 标签。 下面提供了代码，谢谢您的建议。
html :
<!-- Carousel Template HTML -->
<div ng-repeat ="carousel in message track by $index" ng-if ="message.type == 'carousel'">
<div ng-repeat = "item in carousel track by $index">
<md-card class= "basic_template_card" ng-if ="message.type == 'carousel'">
<img ng-src="{{item.image}}" class="md-card-image basic_template_card_image">
<md-card-title>
<md-card-title-text>
<span class="md-headline">{{item.title}}</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
{{item.subtitle}}
</p>
</md-card-content>
<md-card-actions layout="column" layout-align="start" class="template_actions">
<md-button class = "template_button" flex="100" ng-repeat="button in item.buttons track by $index" ng-click="gotoState(button.buttonValue, button.buttonType)">{{button.buttonText}}</md-button>
</md-card-actions>
</md-card>
</div>
</div>
我收到的数据:
"myEntry": false,
"type": "carousel",
"carousel": [
{
"image": "http://webviews.qanta.ai/img/hi.jpg",
"title": "This is a title",
"subtitle": "This is a subtitle",
"buttons": {
"0": {
"buttonText": "DetailsProp",
"buttonType": "state",
"buttonValue": "http://webviews.qanta.ai/detailsProperty_wv/#/homeValue=565656/typeProperty=fgfg"
},
"1": {
"buttonText": "CurrentAdd",
"buttonType": "state",
"buttonValue": "https://webviews.qanta.ai/currentAddress_wv/#/applyWith=sdfdsf"
},
"2": {
"buttonText": "Magic",
"buttonType": "state",
"buttonValue": "https://webviews.qanta.ai/magic/#/d/3.755/360/200000"
}
}
},
{
"image": "http://webviews.qanta.ai/img/hi.jpg",
"title": "This is a title 2",
"subtitle": "This is a subtitle 2",
"buttons": {
"0": {
"buttonText": "DetailsProp2",
"buttonType": "state",
"buttonValue": "http://webviews.qanta.ai/detailsProperty_wv/#/homeValue=565656/typeProperty=fgfg"
},
"1": {
"buttonText": "CurrentAdd2",
"buttonType": "state",
"buttonValue": "https://webviews.qanta.ai/currentAddress_wv/#/applyWith=sdfdsf"
},
"2": {
"buttonText": "Magic2",
"buttonType": "state",
"buttonValue": "https://webviews.qanta.ai/magic/#/d/3.755/360/200000"
}
}
},
{
"image": "http://webviews.qanta.ai/img/hi.jpg",
"title": "This is a title3",
"subtitle": "This is a subtitle3",
"buttons": {
"0": {
"buttonText": "DetailsProp3",
"buttonType": "state",
"buttonValue": "http://webviews.qanta.ai/detailsProperty_wv/#/homeValue=565656/typeProperty=fgfg"
},
"1": {
"buttonText": "CurrentAdd3",
"buttonType": "state",
"buttonValue": "https://webviews.qanta.ai/currentAddress_wv/#/applyWith=sdfdsf"
},
"2": {
"buttonText": "Magic3",
"buttonType": "state",
"buttonValue": "https://webviews.qanta.ai/magic/#/d/3.755/360/200000"
}
}
}
]
}
最佳答案
如果给定的 json 是您的消息对象，则 ng-repeat ="carousel in message track by $index" 对您没有任何作用。删除此行并更改
ng-repeat = "按 $index 轮播轨道中的项目"
至
ng-repeat = "item in message.carousel track by $index"
关于javascript - 嵌套 ng-repeat 创建更多标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44646923/