Question

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

我有一个collection item，我希望一个接一个地显示items，并且它们的位置取决于每行允许的项目数。

例如，我在items中有collection。

如果我每行指定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>

其次，您可以手动将控制器中的项目分组为2-dim数组：

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

以下是演示此内容的插件：http://plnkr.co/edit/bDfRAbMVoOlwNW2iQkso?p=preview

对表格单元格而不是行进行ng-repeat

2 个答案: