web-dev-qa-db-fra.com

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

J'essaie de personnaliser un ng-repeat pour ajouter quelque chose comme une balise br à chaque 4ème élément. J'ai essayé de chercher autour mais je n'arrive pas à trouver une réponse solide. Existe-t-il un moyen simple d’ajouter des conditions à Angular pour quelque chose comme ceci? mon ng-repeat ajoute simplement quelques spans avec du contenu, mais je dois commencer une nouvelle ligne tous les 4 éléments.

c'est-à-dire que je veux ce qui suit

item1 item2 item3 item4 item5 item6 item7 item8

mais maintenant il fait juste ça

item1 item2 item3 item4 item5 item6 item7 item8

S'il y a de bons articles sur la personnalisation de ng-repeat (pour les débutants), je serais reconnaissant pour les liens et 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>
javascriptcssangularjscss3
12
Austin

Vous pouvez simplement utiliser $index et 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>

Mettre à jour

Basé sur le commentaire, vous avez juste besoin de CSS pour cela, il suffit de vider le flottant de chaque nième élément .

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

Démo

Si vous êtes inquiet à propos du support des navigateurs plus anciens, ajoutez simplement une classe à des conditions spécifiques: -

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

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

Démo

31
PSL

Je suis sûr que vous avez résolu votre problème maintenant. Mais à l'avenir, pourquoi ne pas séparer votre liste en javascript plutôt qu'en front-end. Il suffit de faire un traitement de pré-rendu pour obtenir un objet comme celui-ci:

// 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++){
    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 > 0) {
    newList.Push(row);
  }
  
  return newList;
}
<span ng-repeat="row in list">
  <span ng-repeat="col in row" ng-bind="col"></span><br>
</span>

3
Nate Bosscher

La solution de PSL est de choisir le plus simple, mais ... j'ai le même problème et je l'ai finalement résolu de la manière suivante (pour ceux qui ne veulent pas modifier le code CSS ou ne le sont pas)

<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+1]">
    <div class="item item-stacked-label">
      {{exercise.title}}
    </div>
    ....
  </div>
</div>

Ici, je devais mettre 2 exercices par ligne et juste utiliser ng-init pour redéfinir celui choisi (exercice) au suivant ($ index + 1) sur chaque copie. Attention au dernier $ dans le ng-if, sans la sortie peut corrompre la page car il n'y a plus d'éléments dans le tableau à afficher

2
helius

Voici comment j'ai réalisé 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>
0
Phil Hudson