Javascript ng每x个项目后重复不同内容的列表

我试图写一个列表，显示5个项目，然后是一些额外的内容，然后是列表中的下5个项目，并继续这样做，直到列表完成使用ng repeat

乙二醇

• 一,
• 二,
• 三,
• 四,
• 五,
• 额外内容
• 六,
• 七,
• 八,
• 九,
• 十,
• 额外内容
• 十一,
• 十二,
• 十三,
• 十四,
• 十五

我有它与下面的例子，但我希望额外的内容后，每5个项目出现。使用我下面的方法，如果我在列表中有100个项目，那么实现这一点将非常手动。是否有一种方法可以使用ng repeat在列表中的每个x项之后插入一个中断，或者有更好的方法来实现这一点

[{{$index}]{{friend.name}}是{{friend.age}岁。

额外内容

[{{$index}]{{friend.name}}是{{friend.age}岁。

这听起来像是ng重复启动的工作

<div ng-app="">
    <div ng-init="friends = [
    {name:'John', age:25, gender:'boy'},
    {name:'Jessie', age:30, gender:'girl'},
    {name:'Johanna', age:28, gender:'girl'},
    {name:'Joy', age:15, gender:'girl'},
    {name:'Mary', age:28, gender:'girl'},
    {name:'Peter', age:95, gender:'boy'},
    {name:'Sebastian', age:50, gender:'boy'},
    {name:'Erika', age:27, gender:'girl'},
    {name:'Patrick', age:40, gender:'boy'},
    {name:'Samantha', age:60, gender:'girl'}
    ]">
        <ul class="example-animate-container">
            <li ng-repeat-start="friend in friends">
                [{{$index}}] {{friend.name}} is {{friend.age}} years old.
            </li>
            <li ng-if="(($index+1) % 5) == 0">extra content</li>
            <li ng-repeat-end ng-hide>
                <!-- Just an element to end the loop -->
            </li>
        </ul>
    </div>
</div>

[{{$index}]{{friend.name}}是{{friend.age}岁。

额外内容

这听起来像是ng重复启动的工作

<div ng-app="">
    <div ng-init="friends = [
    {name:'John', age:25, gender:'boy'},
    {name:'Jessie', age:30, gender:'girl'},
    {name:'Johanna', age:28, gender:'girl'},
    {name:'Joy', age:15, gender:'girl'},
    {name:'Mary', age:28, gender:'girl'},
    {name:'Peter', age:95, gender:'boy'},
    {name:'Sebastian', age:50, gender:'boy'},
    {name:'Erika', age:27, gender:'girl'},
    {name:'Patrick', age:40, gender:'boy'},
    {name:'Samantha', age:60, gender:'girl'}
    ]">
        <ul class="example-animate-container">
            <li ng-repeat-start="friend in friends">
                [{{$index}}] {{friend.name}} is {{friend.age}} years old.
            </li>
            <li ng-if="(($index+1) % 5) == 0">extra content</li>
            <li ng-repeat-end ng-hide>
                <!-- Just an element to end the loop -->
            </li>
        </ul>
    </div>
</div>

[{{$index}]{{friend.name}}是{{friend.age}岁。

额外内容

正如其他人所指出的，

ng重复开始/结束

应该可以解决您的问题，例如：

<li data-ng-repeat-start="friend in friends">
  [{{$index + 1}}] {{friend.name}} is {{friend.age}} years old.
</li>

<li data-ng-repeat-end data-ng-if="$middle && 0 === ($index + 1) % 5">
  extra content
</li>

[{{$index+1}}]{{friend.name}}是{{friend.age}岁。


额外内容

[{{$index+1}}]{{friend.name}}是{{friend.age}岁。


额外内容

正如其他人所指出的，

ng重复开始/结束

应该可以解决您的问题，例如：

<li data-ng-repeat-start="friend in friends">
  [{{$index + 1}}] {{friend.name}} is {{friend.age}} years old.
</li>

<li data-ng-repeat-end data-ng-if="$middle && 0 === ($index + 1) % 5">
  extra content
</li>

[{{$index+1}}]{{friend.name}}是{{friend.age}岁。


额外内容

[{{$index+1}}]{{friend.name}}是{{friend.age}岁。


额外内容

您可以拥有自己的指令，如

ck repeat=“friends in friends”

检查索引是否可被5整除并将内容添加到其中。您可以拥有自己的指令，如

ck repeat=“friends in friends”

检查索引是否可被5整除并将内容添加到其中。