javascript - 嵌套 ng-repeat 创建更多标签

Question

当我尝试在 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"
                            }
                        }
                    }
                ]
            }

Answer 1

如果给定的 json 是您的消息对象，则 ng-repeat ="carousel in message track by $index" 对您没有任何作用。删除此行并更改

ng-repeat = "按 $index 轮播轨道中的项目"

至

ng-repeat = "item in message.carousel track by $index"