javascript - ng-repeat 列表，每 x 项后内容不同

Question

我正在尝试编写一个列表，该列表显示 5 个项目，然后是一些其他内容，然后是列表中的下 5 个项目，并继续这样做，直到列表使用 ng-repeat 完成。

例如

• 1
• 2
• 3
• 4
• 5
• 额外内容
• 6
• 7
• 8
• 9
• 10
• 额外内容
• 11
• 12
• 13
• 14
• 15

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

see fiddle

<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="friend in friends | limitTo: 5">
            [{{$index}}] {{friend.name}} is {{friend.age}} years old.
          </li>
            <li>extra content</li>
          <li ng-repeat="friend in friends | limitTo: 10" ng-if="$index > 5">
            [{{$index}}] {{friend.name}} is {{friend.age}} years old.
          </li>        
        </ul>
      </div>
    </div>

Answer 1

正如其他人所指出的，ng-repeat-start/end 应该可以解决您的问题，例如:

<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>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<div data-ng-app 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 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>
  </ul>
</div>