angularjs - 在 ng-repeat 生成的元素之间插入一些东西

Question

在使用 ng-repeat 生成的元素之间附加一个元素的最佳方法是什么？

例如：

<div class="block" ng-repeat="position in [1,2,3,4,5,6,7,8,9,10]">{{position+1}}</div>

我想在每第四个元素<br> 之后放一个。我的猜测是用link.post. 告诉我我是否走上正轨。

谢谢

jsFiddle：http: //jsfiddle.net/uPMZU/

Answer 1

我不完全确定您要实现的目标是什么，<br>但是如果您尝试将它们堆叠成四个一组，那么您可以使用ng-repeat 中的 $index 变量和类更改来做一些事情。

JSFiddle：http: //jsfiddle.net/y44Cb/13/

HTML

<div ng-class="{block: ($index +1) % 4}" ng-repeat="position in [1,2,3,4,5,6,7,8,9,10]">
    <div class="red-block">{{position+1}}</div>
</div>

CSS

div.red-block {
    display: inline-block;
    border: 1px solid red;
    width: 50px;
    height: 50px;
}
div.block {
    float: left;
}

Answer 2

您可以使用 ng-repeat-start 和 ng-repeat-end 然后检查是否要在函数中呈现中断。

<div class="block" ng-repeat-start="position in [1,2,3,4,5,6,7,8,9,10]">
        <div class="red-block">{{position+1}}</div>
</div>

和

<br ng-if="includeBreak(position)" ng-repeat-end>

或者

<p ng-if="includeBreak(position)" ng-repeat-end></p>

Answer 3

您可以使用 ng-switch 来做您需要的事情

<div class="block" ng-repeat="position in [1,2,3,4,5,6,7,8,9,10]" data-ng-switch on="($index + 1) % 4 == 0 && $index > 0">
    {{position+1}}
    <br data-ng-switch-when="true">
</div>

jsfiddle： http: //jsfiddle.net/7qrne/如果您检查“5” div，您会发现它
与“9” div 相同，但其他都没有。