Question

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

例如：

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

我想在每个第4个元素之后添加<br> 。我的猜测是用link.post创建一个指令。告诉我，如果我在好的轨道上。

谢谢

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

Answer 1

我不完全确定您要使用<br>尝试实现的目标，但如果您尝试将它们堆叠成四个一组，那么您可以使用$index variable from ng-repeat和类来执行某些操作变化

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/如果你检查＆＃34; 5＆＃34;你会发现它与＆＃34; 9＆＃34;相同。 div，但没有其他人。

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

3 个答案: