Personnalisez ng-repeat dans AngularJS pour chaque nième élément

Je suis en train de personnaliser un ng-repeat pour ajouter quelque chose comme un br balise à chaque 4e élément. J'ai essayé de chercher autour de lui, mais ne semble pas à trouver une réponse solide. Est-il un moyen simple d'ajouter des conditions à Angulaires pour quelque chose comme ça? mon ng-repeat est juste l'ajout de certains spans avec le contenu d'eux, mais j'ai besoin de commencer une nouvelle ligne tous les 4 élément.

c'est à dire que je veux la suite

item1 item2 item3 item4
item5 item6 item7 item8

mais pour l'instant elle se contente de ce

item1 item2 item3 item4 item5 item6 item7 item8

S'il y a des bons articles concernant ng-repeat de personnalisation (pour les débutants) je serais reconnaissant pour des liens ainsi que tout ce que j'ai trouvé jusqu'à présent est trop difficile à comprendre.

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>

source d'informationauteur Austin | 2014-08-11

  1. 30

    Vous pouvez simplement utiliser $index et de l'appliquer avec ng-if sur <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>

    Mise à jour

    Basé sur le commentaire, vous avez juste besoin de css pour cela il suffit d'effacer le flotteur chaque nième élément.

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

    Démo

    Si vous êtes inquiet à propos de soutien pour les anciens navigateurs puis il suffit d'ajouter une classe sur la condition spécifique:-

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

    et une règle pour .section > div.wrap

    Démo

  2. 0

    C'est de cette façon que j'ai obtenu l'insertion d'une ligne tous les 6 éléments:

    <div ng-class='row' ng-if="$index % 6 ? 'row' : ''" ng-repeat="genreNav in genres track by $index">

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

</div>