如何分离ng-repeat中的多个元素？

Question

我正在制作一个使用ng-repeat的网站来显示两个指令和一个元素。第二个指令和元素都显示在x个＆＃34;重复＆＃34;之后。 （使用索引）。这些指令是矩形卡，从左到右显示，直到屏幕已满，然后移动到下一行，如此屏幕截图所示：

白色矩形是第一个指令，黑色矩形是第二个指令和元素。我面临的问题是，如果黑色矩形应该是新行上的第一个项目，它将从上面的行中删除最后一个白色矩形，并显示在下一行的黑色矩形之前。真正发生的事情是，ng-repeat内部的两个指令被捆绑在一起，并且当两个指令在一行上没有空间时不会分离。这是我的意思的一个例子：

好吧，等我的代码。这是我对ng-repeat的html。

<div ng-repeat="acqui in acquis" class="repeated">
    <card-info class="card" acqui="acqui" ng-style=""></card-info>
    <ad-info class="ad-style" ng-if="!(($index + 1) % adFrequency)"></ad-info>
    <div class="ad-spacing" ng-if="!(($index + 1) % adFrequency)"></div>
</div>

正如您所看到的，每次都会显示card-info指令（白色矩形），而ad-info指令（黑色矩形）仅显示每个adFrequency次数。

这是我的CSS。我使用的更少，所以它的格式有点不同：

.card {
    .shadow;
    width: 350px;  
    height: 530px;
    display: inline-table;
    background-color: white;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0 10px 20px 12px;
}
.ad-style {
    position: relative;
    .ads {
        position: absolute;
        .shadow;
        width: 350px;  
        height: 530px;
        display: inline-table;
        background-color: black;
        margin: 6px 0 0 8px;
    }
}
.ad-spacing {
    width: 350px;
    display: inline-table;
    margin: 0 10px -5px 10px;
}

我有什么办法可以解开＆＃34; unbundle＆＃34;那些可以这么说？

注意：我尝试制作一个jsfiddle，但是项目太大了，很多事情都会让一切正常。我已经尽可能多地删除了所以我可以发布这篇文章。

Answer 1

您可以尝试使用 ng-repeat-start 和 ng-repeat-end 。

类似的东西：

<div ng-repeat-start="acqui in acquis" class="repeated">
    <card-info class="card" acqui="acqui" ng-style=""></card-info>
</div>
<div ng-repeat-end class="repeated" ng-if="!(($index + 1) % adFrequency)">
    <ad-info class="ad-style"></ad-info>
    <div class="ad-spacing"></div>
</div>

在这里，您可以阅读更多https://docs.angularjs.org/api/ng/directive/ngRepeat