在AngularJS中为每个第n个元素自定义ng-repeat

Question

我正在尝试自定义一个向每个第4个元素ng-repeat添加类似br标签的东西.我试过四处寻找,但似乎找不到可靠的答案.是否有一种简单的方法可以为Angular添加这样的条件？我ng-repeat只是添加一些spans内容,但我需要每4个元素开始一个新行.

即我想要以下内容

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>

Answer 1

你可以只使用$index与应用它ng-if的<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个元素.

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

演示

如果您担心支持旧浏览器,那么只需在特定条件下添加一个类: -

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

和规则 .section > div.wrap

演示