AngularJS: 有没有办法使用 ng-repeat 从相同的数据数组创建行和列？

Question

我正在尝试创建一个循环，该循环将运行通过数组并将数据输出到 rows/columns。对于数组中的每两项，我希望它创建一个包含两列的新行，如下所示：

<div class="row">
   <div class="col">1</div>
   <div class="col">2</div>
</div>

这是我的数组示例：

$scope.array = [1,2,3,4,5,6,7,8,9];

所以，整体的最终需求是这样的：

<div class="row">
   <div class="col">1</div>
   <div class="col">2</div>
</div>
<div class="row">
   <div class="col">3</div>
   <div class="col">4</div>
</div>
<div class="row">
   <div class="col">5</div>
   <div class="col">6</div>
</div>
<div class="row">
   <div class="col">7</div>
   <div class="col">8</div>
</div>
<div class="row">
   <div class="col">9</div>
</div>

这是我最初尝试的，但只显示了一栏。

<div ng-repeat="item in array">
   <div ng-if="$index % 2 === 0" class="row">
      <div class="col">{{item}}</div>
   </div>
</div>

关于如何实现此目标的任何其他想法或方向？谢谢。

Answer 1

你们非常亲密！试试这个：

<div ng-repeat="item in array">
   <div ng-if="$index % 2 === 0" class="row">
      <div class="col">{{item}}</div>
      <div ng-if="$index + 1 < array.length" class="col">
         {{array[$index + 1]}}
      </div>
   </div>
</div>

您只缺少第二列。

AngularJS: 有没有办法使用 ng-repeat 从相同的数据数组创建行和列？

AngularJS: Is there a way to use ng-repeat to create rows and columns from the same array of data?

css

arrays

angularjs

angularjs-ng-repeat