Настройте ng-repeat в AngularJS для каждого n-го элемента

Я пытаюсь настроить ng-repeat, чтобы добавить что-то вроде тега br к каждому четвертому элементу. Я пробовал искать, но, похоже, не нашел надежного ответа. Есть ли простой способ добавить условия к Angular для чего-то подобного? my ng-repeat просто добавляет некоторые spans с содержимым в них, но мне нужно запустить новую строку каждый 4-й элемент.

то есть. Я хочу следующее

item1 item2 item3 item4 item5 item6 item7 item8

но прямо сейчас он делает это

item1 item2 item3 item4 item5 item6 item7 item8

Если есть хорошие статьи, относящиеся к настройке ng-repeat (для новичков), я был бы благодарен за ссылки, а все, что я нашел до сих пор, слишком сложно понять.

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>

Ответы

Ответ 1

Вы можете просто использовать $index и применить его с помощью ng-if на <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>

Обновление

На основе комментария вам просто нужен css, чтобы просто очистить float каждый nth element.

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

Демо

Если вас беспокоит поддержка старых браузеров, просто добавьте класс в определенное состояние: -

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

и правило для .section > div.wrap

Демо

Ответ 2

Я уверен, что вы решили проблему сейчас. Но в будущем почему бы не разделить ваш список на javascript, а не на переднем конце. Просто выполните предварительную обработку, чтобы получить такой объект:

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

PSL-решение для shure neater one, но.. У меня такая же проблема, и в конце концов я решил ее следующим образом (для тех, кто не хочет настраивать CSS или не входит в это)

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

Ответ 4

Вот как я достиг вставки строки каждые 6 элементов:

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