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>

每x个项目后具有不同内容的ng-repeat列表

2 个答案: