【问题标题】:AngularJS: Is there a way to use ng-repeat to create rows and columns from the same array of data?AngularJS:有没有办法使用 ng-repeat 从同一个数据数组创建行和列?
【发布时间】:2019-04-12 23:10:45
【问题描述】:

我正在尝试创建一个循环,该循环将遍历一个数组并将数据输出到行/列中。对于数组中的每两项,我希望它创建一个包含两列的新行,如下所示:

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

关于我如何实现这一目标的任何其他想法或方向?谢谢。

【问题讨论】:

  • 使用二维数组可能会更好。
  • 您能提供示例输出吗?谢谢

标签: css arrays angularjs angularjs-ng-repeat


【解决方案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>

您缺少的只是第二列。

【讨论】:

    猜你喜欢
    • 2015-02-23
    • 1970-01-01
    • 2013-10-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-08-09
    相关资源
    最近更新 更多