web-dev-qa-db-de.com

Passen Sie ng-repeat für jedes n-te Element in AngularJS an

Ich versuche, einen ng-repeat anzupassen, um jedem 4. Element etwas wie einen br-Tag hinzuzufügen. Ich habe versucht, herumzusuchen, kann aber keine solide Antwort finden. Gibt es eine einfache Möglichkeit, Angular Bedingungen für so etwas hinzuzufügen? mein ng-repeat fügt nur etwas spans mit Inhalt hinzu, aber ich muss bei jedem 4. Element eine neue Zeile beginnen.

ich möchte folgendes

item1 item2 item3 item4 item5 item6 item7 item8

aber jetzt tut es das einfach

item1 item2 item3 item4 item5 item6 item7 item8

Wenn es gute Artikel zu ng-repeat Anpassung gibt (für Neulinge), wäre ich dankbar für Links und alles was ich bisher gefunden habe ist zu schwer zu verstehen.

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>
12
Austin

Sie können einfach $index verwenden und es mit ng-if auf <br ng-if="!($index%4)" /> anwenden.

<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

Basierend auf dem Kommentar benötigen Sie nur css. Löschen Sie einfach den Float jedes n-ten Element .

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

DEMO

Wenn Sie sich Sorgen um die Unterstützung älterer Browser machen, fügen Sie unter bestimmten Bedingungen eine Klasse hinzu: -

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

und eine Regel für .section > div.wrap

DEMO

31
PSL

Ich bin sicher, dass Sie Ihr Problem jetzt gelöst haben. Aber in Zukunft sollten Sie Ihre Liste nicht in Javascript und nicht im Frontend aufteilen. Führen Sie einfach eine Vorverarbeitung aus, um ein Objekt wie dieses zu erhalten:

// 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

Die Lösung von PSL ist für den nackten eine, aber ... Ich hatte das gleiche Problem und am Ende habe ich es auf folgende Weise gelöst (für diejenigen, die CSS nicht optimieren wollen oder nicht.

<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>

Hier musste ich zwei Übungen pro Reihe setzen und einfach mit ng-init die tatsächlich ausgewählte (Übung) auf die nächste ($ index + 1) auf jeder Kopie setzen. Beachten Sie das! $ Last im ng-if, ohne dass die Ausgabe die Seite beschädigen kann, da im Array keine weiteren Elemente angezeigt werden

2
helius

So gelang es mir, alle 6 Elemente eine Zeile einzufügen:

<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