在AngularJS中为每n个元素定制ng-repeat

Customize ng-repeat in AngularJS for every nth element

本文关键字：元素 ng-repeat AngularJS      更新时间：2023-09-26

我正在尝试自定义ng-repeat以添加类似br标记的东西到每4个元素。我试着四处寻找，但似乎找不到一个可靠的答案。有没有一种简单的方法可以在Angular中添加条件来处理这样的事情?我的ng-repeat只是添加一些spans与内容在他们，但我需要开始一个新的行每4个元素。

。我想要下面的

item1 item2 item3 item4 item5 item6 item7 item8

但是现在它只是做这个

item1 item2 item3 item4 item5 item6 item7 item8

如果有任何关于ng-repeat定制(新手)的好文章，我将感谢链接以及我迄今为止发现的一切太难理解了。

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

你可以使用$index并在<br ng-if="!($index%4)" />上应用ng-if 

<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来清除每n个元素的浮动。

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

如果你担心对旧浏览器的支持，只需在特定的条件下添加一个类:-

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

和.section > div.wrap

的规则

我相信你现在已经解决了你的问题。但在未来，为什么不在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>

PSL的解决方案是关闭更整洁的一个，但是…我遇到了同样的问题，并最终以以下方式解决了它(对于那些不想调整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>

在这里，我必须在每行放置2个练习，并使用ng-init再次将实际选择的一个(练习)设置为每个副本上的下一个($index+1)。注意ng-if中的!$last，没有输出可能会破坏页面，因为数组中没有更多的元素来显示

这就是我如何实现每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>
相关文章：