Question

我遇到嵌套ng-repeat的问题：

<div ng-repeat="IS in ISList">

            ...

            <div ng-repeat="area in areaList">
                <h5 ng-if="hasAreaResult(IS, area)">{{area}}</h5>
                <md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-lg="3" md-cols-gt-lg="4"
                              md-row-height-gt-md="1.25:1" md-row-height="1:1"
                              md-gutter="10px" md-gutter-gt-sm="10px" class="grid">

                    <md-grid-tile class="gray" ng-repeat="carto in filterCartoList()" class="slide" ng-if="carto.informationSystem == IS && carto.type != 'AM' && carto.type != 'IF' && carto.area == area && !carto.block  && carto.level != 'theme'">
                        <md-button ng-click="changeSVG(carto.fileName)" aria-label="carto.displayName">
                            <img src="style/images/thumbnails/{{carto.fileName}}.png" width="100%" height="100%" title="{{carto.fullDisplayName}}" style="max-height: 220px;"></img>
                        </md-button>
                        <md-grid-tile-footer><h3 align="center">{{carto.displayName}}</h3> </md-grid-tile-footer>
                    </md-grid-tile>

                </md-grid-list>

                <div ng-repeat="block in blockList">
                    <h6 ng-if="hasBlockResult(IS, area, block)">{{block}}</h6>
                    <md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-lg="3" md-cols-gt-lg="4"
                                  md-row-height-gt-md="1.25:1" md-row-height="1:1"
                                  md-gutter="10px" md-gutter-gt-sm="10px" class="grid">

                        <md-grid-tile class="gray" ng-repeat="carto in filterCartoList()" class="slide" ng-if="carto.informationSystem == IS && carto.type != 'AM' && carto.type != 'IF' && carto.area == area && carto.block == block && carto.level != 'theme'"> 
                            <md-button ng-click="changeSVG(carto.fileName)" aria-label="carto.displayName">
                                <img src="style/images/thumbnails/{{carto.fileName}}.png" width="100%" height="100%" title="{{carto.fullDisplayName}}" style="max-height: 220px;"></img>
                            </md-button>
                            <md-grid-tile-footer><h3 align="center">{{carto.displayName}}</h3> </md-grid-tile-footer>
                        </md-grid-tile>

                    </md-grid-list>
                </div>
            </div>
        </div>

由于我添加了<div ng-repeat="block in blockList">块，因此我的浏览器看起来无法加载和崩溃。循环不是那么长，所以我不知道为什么会出现这种行为

Answer 1

问题出在IDE上。它认为这些是HTML属性，因为没有具有该名称的属性，它表示不允许这样做。

使用data-解决此问题前缀。这将使该属性有效，并且不会显示错误。

<div data-ng-repeat="block in blockList">
    <h6 data-ng-if="hasBlockResult(IS, area, block)">{{block}}</h6>

嵌套ng-repeat的问题

1 个答案: