[英]ng-repeat list with different content after every x items
I am trying to write a list that show 5 items then some additional content then the next 5 items in the list and keep doing this until the list has finished using ng-repeat. 我正在尝试编写一个显示5个项目的列表,然后显示一些其他内容,然后显示列表中的下5个项目,并一直这样做,直到使用ng-repeat完成列表为止。
eg 例如
I have it working with the below example however I want the extra content to appear after every 5 items. 我可以在下面的示例中使用它,但是我希望每5个项目之后显示额外的内容。 Using my method below it would be very manual to implement this if I had for example 100 items in the list.
如果我在列表中有100个项目,那么使用下面的方法来执行此操作将非常手动。 Is there a way to inject a break after every x items in the list using ng-repeat or is there a better way to approach this?
有没有一种方法可以使用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>
As others have pointed out, ng-repeat-start/end
should solve your problem, eg: 正如其他人指出的那样,
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>
This sounds like a job for ng-repeat-start. 这听起来像是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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.