定制AngularJS NG-重复每第n个元素 [英] Customize ng-repeat in AngularJS for every nth element

问题描述

我想自定义 NG-重复来有点像 BR 标记添加到每4个元素。我试图寻找周围却似乎无法找到一个坚实的答案。有没有一种简单的方法来添加条件角这样的事情？我的 NG-重复只是增加了一些跨度在他们的内容，但我要开始一个新的生产线每4个元素。

即。我想下面的

ITEM1 ITEM2项目3 ITEM4
 ITEM5 ITEM6 item7 item8

但现在它只是做到这一点。

ITEM1 ITEM2项目3 ITEM4 ITEM5 ITEM6 item7 item8

如果有关于 NG-重复自定义（新手）我会感谢链接，以及一切我迄今发现的好文章是太困难了理解了。

HTML

 ＆LT; D​​IV CLASS =部分＆GT;
    ＆LT; D​​IV NG重复=，在MYLIST项目＆GT;
      ＆LT; IMG NG点击=AddPoint（$指数）SRC = {{items.image}} /＆GT;
      ＆所述;跨度＆GT; {{items.currentPoint}} / {{items.endPoint}}＆下; /跨度＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
 

解决方案

您可以只使用 $指数和应用它NG-如果在＆LT; BR NG-IF = /＆GT（$索引％4）！;

 ＆LT; D​​IV CLASS =部分＆GT;
    ＆LT; D​​IV NG重复=，在MYLIST项目＆GT;
      ＆LT; IMG NG点击=AddPoint（$指数）SRC = {{items.image}} /＆GT;
      ＆所述;跨度＆GT; {{items.currentPoint}} / {{items.endPoint}}＆下; /跨度＆GT;
      ＆LT; BR NG-IF =（（$指数+ 1）％4）！/＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
 

更新

基于注释

，你只需要为这个CSS只是清除浮动每次的第n个元素。

  .section伪＆GT;格：第n的式（4N + 1）{
  明确：两者;
}
 

演示

如果你担心支援旧版浏览器则只需添加上特定条件的类： -

 ＆LT; D​​IV NG重复=，在offensiveMasteries项目NG-CLASS ={包！（$索引％4）}＆GT;
 

和 .section伪＆GT的规则; 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 NG-重复每第n个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！