在AngularJS中为每个第n个元素定制ng-repeat [英] Customize ng-repeat in AngularJS for every nth element

问题描述

我想自定义 ng-repeat ，为每个第4个元素添加 br 标签。我试着在周围搜索，但似乎找不到一个坚实的答案。有没有一个简单的方法来添加条件Angular这样的东西？我的 ng-repeat 只是添加了一些跨度的内容，但我需要每四年开始一个新行元素。

I am trying to customize an ng-repeat to add something like a br tag to every 4th element. I have tried searching around but cannot seem to find a solid answer. Is there a simple way to add conditions to Angular for something like this? my ng-repeat is just adding some spans with content in them, but I need to start a new line every 4th element.

ie我想要下列

item1 item2 item3 item4
item5 item6 item7 item8

但现在只是这样

item1 item2 item3 item4 item5 item6 item7 item8

如果有任何有关 ng-repeat 自定义

HTML

  <div class="section">
    <div ng-repeat="items in MyList">
      <img ng-click="AddPoint($index)" src={{items.image}} />
      <span>{{items.currentPoint}}/{{items.endPoint}}</span>
    </div>
  </div>

推荐答案

您可以使用 $在< br ng-if =！（$ index％4）上应用 ng-if />

You could just use $index and apply it with ng-if on <br ng-if="!($index%4)" />

<div class="section">
    <div ng-repeat="items in MyList">
      <img ng-click="AddPoint($index)" src={{items.image}} />
      <span>{{items.currentPoint}}/{{items.endPoint}}</span>
      <br ng-if="!(($index + 1) % 4)" />
    </div>
  </div>

更新

基于注释，你只需要css为这只是清除浮动每第n个元素。

Based on the comment, you just need css for this just clear the float every nth element.

.section > div:nth-of-type(4n+1){
  clear:both;
}

演示

Demo

如果您担心支持旧版浏览器， - 特定条件下的类： -

If you are worried about support for older browsers then just add a class on specific condition:-

 <div ng-repeat="items in offensiveMasteries" ng-class="{wrap:!($index % 4)}">

以及 .section> div.wrap

演示

Demo

这篇关于在AngularJS中为每个第n个元素定制ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！