每x個項目后有不同內容的ng-repeat列表

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個項目之后插入一個中斷，或者有更好的方法來解決這個問題？

看小提琴

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

Answer 2

這聽起來像是ng-repeat-start的工作。

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