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

问题描述

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

即我想要以下

item1 item2 item3 item4item5 item6 item7 item8

但现在它只是这样做

item1 item2 item3 item4 item5 item6 item7 item8

如果有任何关于 ng-repeat 自定义(对于新手)的好文章，我将感谢提供链接以及我迄今为止发现的所有内容都太难理解了.

HTML

 
<div ng-repeat="MyList 中的项目"><img ng-click="AddPoint($index)" src={{items.image}}/><span>{{items.currentPoint}}/{{items.endPoint}}</span>

解决方案

您可以只使用 $index 并将其与 ng-if 一起应用于


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

更新

根据评论，您只需要 css 就可以清除浮动每个 第n个元素.

.section >div:nth-of-type(4n+1){清除:两者；}

演示

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

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

和 .section 的规则 >div.wrap

演示

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.

i.e. I want the following

item1 item2 item3 item4 item5 item6 item7 item8

but right now it just does this

item1 item2 item3 item4 item5 item6 item7 item8

If there are any good articles relating to ng-repeat customization (for newbies) I would be thankful for links as well as everything I have found thus far is too difficult to understand.

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>

解决方案

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>

Update

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)}">

and a rule for .section > div.wrap

Demo

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