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

Question

我正在尝试自定义一个 ng-repeat 以将类似 br 标记的内容添加到每个第 4 个元素中。我试过四处搜索，但似乎找不到可靠的答案。有没有一种简单的方法可以为这样的事情向 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 即可每隔 nth element 清除 float .

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

Demo

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

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

和 .section > div.wrap 的规则

Demo