Question

我正在尝试自定义ng-repeat以向每个第4个元素添加类似br标记的内容。我试过四处寻找，但似乎找不到可靠的答案。是否有一种简单的方法可以为Angular添加这样的条件？我的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>

Answer 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就可以清除每个nth element的浮动。

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

<强> Demo

如果您担心支持旧浏览器，那么只需在特定条件下添加一个类： -

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

以及.section > div.wrap

的规则

<强> Demo

Answer 2

我相信你现在已经解决了你的问题。但是在将来，为什么不在javascript而不是在前端分隔你的列表。只需做一些预渲染处理就可以获得这样的对象：

＆＃13;

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

＆＃13;

<span ng-repeat="row in list">
  <span ng-repeat="col in row" ng-bind="col"></span><br>
</span>

＆＃13;

Answer 3

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>

在这里，我必须每行放两个练习，并且只使用ng-init将每个副本上的实际拾取的一个（练习）再次设置为下一个（$ index + 1）。请注意！$ if中的ng-if，没有输出可能会破坏页面，因为阵列中没有更多元素可以显示

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

在AngularJS中为每个第n个元素自定义ng-repeat

4 个答案: