Html 如何使用ng repeat，使其连续显示两张卡？ {{a.name}} {{a.display_price}}

我已经用ng repeat创建了一个卡片列表。现在我想在第一行显示第一张和第二张卡，在第二行显示第三张和第四张卡，依此类推。

最简单的方法是使用占据一半屏幕的容器。例如，如果您正在使用引导，请使用

col-xs-6

如果每行需要一个容器，那么一种方法是使用循环在数组上迭代length/2，并在该循环中显示项

i*2

和

i*2+1

不幸的是，您不能使用

ng repeat

真正迭代

n

次，而只能在数组上迭代。因此，您需要一个助手函数来返回索引数组。您还可以使用条件检查当前项是否为偶数，如下所示：

<div class="card" ng-repeat="a in result.products">
 <img style="margin-top:-15px;height: 146px;width: 109.9%;margin-left: -16px;" src="./img/Final1.jpg">
  <p style="font-weight:bold;">
   {{a.name}}
  </p>
  <p style="font-weight:bold;">
   {{a.display_price}}
  </p>
</div>

{{myarray[$index]}
{{myarray[$index+1]}

---

如果这种方法会导致大量的代码复制，因为对于项目N* 2和项目N*2 + 1的HTML类似，您可以考虑使用一个简单的模板指令，将该项作为隔离范围。

您使用Bootstrap或另一个基于网格的框架吗？请提供您的HTMLI在离子框架中所做的工作，我编辑了我的问题。

<div ng-repeat="a in myarray track by $index">
   <div ng-if="$index % 2 == 0">
      <div>{{myarray[$index]}}</div>
      <div ng-if="myarray.length < $index+1">{{myarray[$index+1]}}</div>
   </div>
</div>