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

Posted 2023-03-06

【中文标题】AngularJS - ng-repeat 水平 x 次，然后换行

【英文标题】：AngularJS - ng-repeat horizontally x number of times, then new line

【发布时间】：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" />
                <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

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

谢谢

【参考方案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)" />

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