AngularJS - ng-repeat 水平 x 次，然后换行答案

【问题标题】：AngularJS - ng-repeat horizontally x number of times, then new lineAngularJS - ng-repeat 水平 x 次，然后换行
【发布时间】：2014-11-30 13:55:21
【问题描述】：

我正在尝试在 <li> 上执行简单的 ng-repeat。过去，我创建了垂直的ng-repeat。我现在正在尝试创建一个水平的，但是，一个显示 4 个项目，然后在新行上再次启动 ng-repeat。

我解决这个问题的方法是使用此处找到的网格包装技术 (CSS)：http://builtbyboon.com/blog/proportional-grids

因此每个<li> 的 CSS 类/宽度为四分之一 (25%)。

这是正确/有角度的方式吗？或者我应该在<li> 上使用某种$index 并在$index == 3 时触发<br>？

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>

CSS：

.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%;
}

这是我的 plunkr：http://plnkr.co/edit/REixcir0gL0HGCTvclYN?p=preview

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

谢谢

【问题讨论】：

标签： angularjs css angularjs-scope angularjs-ng-repeat

【解决方案1】：

我做了一些研究并找到了这个答案： Customize ng-repeat in AngularJS for every nth element

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

所以你可以使用这个：

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

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

【讨论】：