如何使用 ng-repeat，使其连续显示两张牌

Question

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

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

Answer 1

最简单的方法是使用占据一半屏幕的容器。例如，如果您使用的是引导程序，请使用 col-xs-6 。

如果您需要每行一个容器，那么一种方法是使用循环在数组上迭代 length/2，并在此循环中显示项i*2和i*2 + 1。

不幸的是，你不能使用 ng-repeat 真正迭代 n 次，而只能在数组上迭代。因此，您需要一个返回索引数组的帮助程序函数。您还可以使用条件来检查当前项目是否为偶数，如下所示：

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

如果此方法会导致大量代码重复，因为项 n*2 和项 n*2+1 的 html 相似，则可以考虑使用将项作为隔离范围的简单模板指令。