blocks|key|464672|text|您只需使用$index并将其与ng-if一起应用于<br+ng-if="!($index%254)"+/>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|464673|<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+%2B+1)+%25+4)"+/>
++++</div>
++</div>|code-block|syntax|javascript|464674|更新|BOLD|464675|根据注释，您只需要css就可以清除每个nth元素的浮动。|464676|.section+>+div:nth-of-type(4n%2B1){
++clear:both;
}|464677|演示|464678|如果您担心对旧浏览器的支持，那么只需在特定条件下添加一个类：|464679|+<div+ng-repeat="items+in+offensiveMasteries"+ng-class="{wrap:!($index+%25+4)}">|464680|以及.section+>+div.wrap的一个规则|464681|464682|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type|1|http://plnkr.co/edit/6OzdrzjZhpBFYlbetoSY?p=preview|2|http://plnkr.co/edit/sXRR5U2fxYm0tZhHDU1Y?p=preview^0|5|6|F|5|P|Q|0|0|0|2|0|J|5|0|0|0|0|2|1|0|0|0|2|J|0|0|2|2|0^^$0|@$1|2|3|4|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1J|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1K|8|@$9|1L|A|1M|B|M]]|D|@]|E|$]]|$1|N|3|O|5|6|7|1N|8|@]|D|@$9|1O|A|1P|1|1Q]]|E|$]]|$1|P|3|Q|5|H|7|1R|8|@]|D|@]|E|$I|J]]|$1|R|3|S|5|6|7|1S|8|@]|D|@$9|1T|A|1U|1|1V]]|E|$]]|$1|T|3|U|5|6|7|1W|8|@]|D|@]|E|$]]|$1|V|3|W|5|H|7|1X|8|@]|D|@]|E|$I|J]]|$1|X|3|Y|5|6|7|1Y|8|@$9|1Z|A|20|B|C]]|D|@]|E|$]]|$1|Z|3|S|5|6|7|21|8|@]|D|@$9|22|A|23|1|24]]|E|$]]|$1|10|3|-4|5|6|7|25|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]|18|$5|13|14|15|E|$16|19]]|1A|$5|13|14|15|E|$16|1B]]]]

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

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

<p><strong>Update</strong></p>

<p>Based on the comment, you just need css for this just clear the float every <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type" rel="noreferrer">nth element</a>.</p>

<pre><code>.section &gt; div:nth-of-type(4n+1){
  clear:both;
}
</code></pre>

<p><strong><a href="http://plnkr.co/edit/6OzdrzjZhpBFYlbetoSY?p=preview" rel="noreferrer">Demo</a></strong></p>

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

<pre><code> &lt;div ng-repeat="items in offensiveMasteries" ng-class="{wrap:!($index % 4)}"&gt;
</code></pre>

<p>and a rule for <code>.section &gt; div.wrap</code></p>

<p><strong><a href="http://plnkr.co/edit/sXRR5U2fxYm0tZhHDU1Y?p=preview" rel="noreferrer">Demo</a></strong></p>


blocks|key|464687|text|我相信你已经解决了你的问题。但是在将来，为什么不用javascript而不是前端把你的列表分开。只需做一些预渲染处理就可以得到这样一个对象：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|464688|​|464689|//+convert+this
var+list+=+["item+1",+"item+2",+"item+3",+"item+4",+"item+5",+"item+6"];

//+into+this

var+list+=+[
++["item+1",+"item+2",+"item+3"],
++["item+4",+"item+5",+"item+6"]
];

//+you+could+use+a+function+like+this
function+convertToRowsOf3(list)+{
++var+newList+=+[];
++var+row;
++
++for(var+i+=+0;+i+<+list.length;+i%2B%2B){
++++if(i+%25+3+==+0){+//+every+3rd+one+we're+going+to+start+a+new+row
++++++if(row+instanceof+Array)
++++++++newList.push(row);+//+if+the+row+exists+add+it+to+the+newList
++++++
++++++row+=+[]+//+initalize+new+row
++++}
++++
++++row.push(list[i]);+//+add+each+item+to+the+row
++}
++
++if(row.length+>+0)+{
++++newList.push(row);
++}
++
++return+newList;
}|code-block|syntax|javascript|464690|<span+ng-repeat="row+in+list">
++<span+ng-repeat="col+in+row"+ng-bind="col"></span><br>
</span>|464691|464692|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>I'm sure you've solved your issue by now. But in the future, why not separate your list in javascript rather than on the front end. Just do some pre-rendering processing to get an object like this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// convert this
var list = ["item 1", "item 2", "item 3", "item 4", "item 5", "item 6"];

// into this

var list = [
  ["item 1", "item 2", "item 3"],
  ["item 4", "item 5", "item 6"]
];

// you could use a function like this
function convertToRowsOf3(list) {
  var newList = [];
  var row;
  
  for(var i = 0; i &lt; list.length; i++){
    if(i % 3 == 0){ // every 3rd one we're going to start a new row
      if(row instanceof Array)
        newList.push(row); // if the row exists add it to the newList
      
      row = [] // initalize new row
    }
    
    row.push(list[i]); // add each item to the row
  }
  
  if(row.length &gt; 0) {
    newList.push(row);
  }
  
  return newList;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span ng-repeat="row in list"&gt;
  &lt;span ng-repeat="col in row" ng-bind="col"&gt;&lt;/span&gt;&lt;br&gt;
&lt;/span&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1253054|text|这就是我如何实现每6项插入一行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1253055|<div+ng-class='row'+ng-if="$index+%25+6+?+'row'+:+''"+ng-repeat="genreNav+in+genres+track+by+$index">

++++++<img+src="{{genreNav.image}}"+class="thumbnail+img-responsive">

</div>|code-block|syntax|javascript|1253056|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is how I achieved inserting a row every 6 items:</p>

<pre><code>&lt;div ng-class='row' ng-if="$index % 6 ? 'row' : ''" ng-repeat="genreNav in genres track by $index"&gt;

      &lt;img src="{{genreNav.image}}" class="thumbnail img-responsive"&gt;

&lt;/div&gt;
</code></pre>


blocks|key|1253066|text|PSL的解决方案是解决更整洁的问题，但是..。我也遇到了同样的问题，最终以如下的方式解决了这个问题(对于那些不想调整CSS或者不想这么做的人)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1253067|​|1253068|<div+class="row+responsive-sm"+ng-repeat="exercise+in+exercises"+ng-if="$even">
++<div+class="col+col-50">
++++<div+class="item+item-stacked-label">
++++++{{exercise.title}}
++++</div>
++++....
++</div>
++<div+class="col+col-50"+ng-if="!$last"+ng-init="exercise+=+exercises[$index%2B1]">
++++<div+class="item+item-stacked-label">
++++++{{exercise.title}}
++++</div>
++++....
++</div>
</div>|code-block|syntax|javascript|1253069|1253070|在这里，我不得不在每一行进行2次练习，并且只是使用ng-init来重新设置每个副本上实际挑选的一个(练习)到下一个($index%2B1)。请注意ng中的!$last+-如果没有输出，可能会损坏页面，因为数组中没有更多要显示的元素。|1253071|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>PSL's solution is for shure the neater one, but..
I got the same problem and in the end solved it in the following way (for those not wanting to tweak CSS or are not so into it)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row responsive-sm" ng-repeat="exercise in exercises" ng-if="$even"&gt;
  &lt;div class="col col-50"&gt;
    &lt;div class="item item-stacked-label"&gt;
      {{exercise.title}}
    &lt;/div&gt;
    ....
  &lt;/div&gt;
  &lt;div class="col col-50" ng-if="!$last" ng-init="exercise = exercises[$index+1]"&gt;
    &lt;div class="item item-stacked-label"&gt;
      {{exercise.title}}
    &lt;/div&gt;
    ....
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Here I had to put 2 exercises each row and just used ng-init to set again the actual picked one (exercise) to the next ($index+1) on each copy. Mind the !$last in the ng-if, without the output may corrupt the page as there are no more elements in the array to display</p>


<p>I am trying to customize an <code>ng-repeat</code> to add something like a <code>br</code> 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 <code>ng-repeat</code> is just adding some <code>spans</code> with content in them, but I need to start a new line every 4th element.</p>

<p>i.e. I want the following</p>

<p><code>item1 item2 item3 item4
 item5 item6 item7 item8</code></p>

<p>but right now it just does this</p>

<p><code>item1 item2 item3 item4 item5 item6 item7 item8</code></p>

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

<p><strong>HTML</strong></p>

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


Customize ng-repeat in AngularJS for every nth element

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试自定义一个ng-repeat，以便将类似于br标记的东西添加到第四个元素中。我试过四处寻找，但似乎找不到确切的答案。有什么简单的方法可以为这样的事情增加条件吗？我的ng-repeat只是添加了一些包含内容的spans，但是我需要每4个元素启动一个新的行。也就是说，我想要以下内容item1 item2 item...

问为每个n个元素自定义ng-在AngularJS中重复
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为每个n个元素自定义ng-在AngularJS中重复EN