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

一尘不染

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

angularjs

我正在尝试自定义一个，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>

阅读 218

2020-07-04

共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

演示版

2020-07-04