Question

当我尝试在angular js app中迭代我的对象数组时，我遇到了一个问题。无法理解为什么我在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 = "item in carousel track by $index"

到

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

嵌套的ng-repeat会创建更多标签angularjs

1 个答案: