Question

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

我的方法是使用网格包装技术（CSS）：http://builtbyboon.com/blog/proportional-grids

因此每个<li>的CSS类/宽度为四分之一（25％）。

这是正确/可行的方式吗？或者我应该在$index上使用某种<li>并在<br>时触发$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>

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

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

您认为可以随意添加任何其他改进。

由于

Answer 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)" />

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

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

1 个答案: