AngularJS-ng水平重复x次，然后换行

我试图在

上执行一个简单的

ng repeat

。在过去，我创建了垂直

ng repeat

。我现在尝试创建一个水平的，但是，一个显示4个项目，然后在新行上再次开始

ng repeat

我所采用的方法是使用网格包裹技术（CSS），可以在这里找到：

因此，每个

，都有四分之一（25%）的CSS类/宽度

这是正确的方法吗？或者我应该在

上使用某种

$index

并在

$index==3

时触发

HTML:

<div ng-controller="MainCtrl">
    <ul class="grid-wrap one-whole">
        <li ng-repeat="product in Products" class="grid-col one-quarter">
            <div class="product-container">
                <div>{{ product.ModelNo }}</div>
                <img ng-src="{{product.ImgURL}}" width="80%"/>
                <div>${{ product.Price }}</div>
            </div>
        </li>
    </ul>
</div>

.grid-wrap {
  margin-left: -3em;
  /* the same as your gutter */
  overflow: hidden;
  clear: both;
}
.grid-col {
  float: left;
  padding-left: 3em;
  /* this is your gutter between columns */
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.one-quarter {
  width: 25%;
}

这是我的建议：

您看到的任何其他改进都可以随意添加

---

谢谢

我做了一些研究，找到了这个答案：

{{items.currentPoint}/{{items.endPoint}

所以你可以用这个：

<br ng-if="!(($index + 1) % 4)" />

似乎没有更好的办法了。您可能无法使用索引

<br ng-if="!(($index + 1) % 4)" />