ng-repeat 在 table 单元格而不是行

Question

有没有办法在单元格而不是行上使用 ng-repeat？我知道我在标题中说了 "table"，但我想尽可能避免使用 table。

我有collection个item，我想依次显示items个，它们的位置取决于每行允许的项目数。

比如我在collection.

中有7个items

如果我每行指定 3 个项目，我的结果应该如下所示。

如果我每行指定 4 个项目，我的结果应该如下所示。

有没有办法用一个 ng-repeat 来实现这个？我希望结果是这样的：

<div> <!--ng-repeat here-->
    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
    <br>
    <span>item4</span>
    <span>item5</span>
    <span>item6</span>
    <br>
    <span>item7</span>
    <span>item8</span>
</div>

还是我被迫嵌套ng-repeat？

Answer 1

首先你可以尝试一些简单的，比如：

<div ng-repeat="i in items">
  <div style="width: 33%; height: 100px; float: left">{{i}}</div>
</div>

其次，您可以手动将控制器中的项目分组到二维数组中：

<div ng-repeat="iRow in groupedItems">
  <div ng-repeat="i in iRow">
    <div style="width: 100px; height: 100px; float: left">{{i}}</div>
  </div>
</div>

第三，你可以编写指令来为你分组项目，它看起来像：

   <div group-items="items" group-items-per-row="4" group-items-result="groupedItems" group-items-regroup="yourTrigger">
    <div ng-repeat="iRow in groupedItems">
      <div ng-repeat="i in iRow">
        <div style="width: 100px; height: 100px; float: left">{{i}}</div>
      </div>
    </div>
</div>

Answer 2

您要创建的 html 结构可以使用 ng-repeat-start 和 ng-repeat-end 指令来完成。例如：

JS

var app = angular.module('testapp', []);

app.controller('TestController', function($scope) {
  $scope.items = [1,2,3,4,5,6,7,8,9,10,11,12,13];
  $scope.itemsPerRow = 3;
});

HTML:

  <body ng-app="testapp">
    <div ng-controller="TestController">
      Number of item per row: <input type="number" ng-model="itemsPerRow" />
      <br />
      <span ng-repeat-start="item in items">{{item}}</span>
      <br ng-repeat-end="" ng-if="$index!=0 && ($index+1)%itemsPerRow==0"/>
    </div>
  </body>

这是演示这一点的 plunker：http://plnkr.co/edit/bDfRAbMVoOlwNW2iQkso?p=preview

ng-repeat 在 table 单元格而不是行

ng-repeat on table cell instead of row

html

angularjs

angularjs-ng-repeat