javascript - 如何使用 ng-repeat 同时获取两个连续的数组对象

Question

假设我们的 Controller 中有一个数组，如下所示:

$scope.elements = [
  {
    title: title-1,
    desc: description-1
  },
  {
    title: title-2,
    desc: description-2
  },
  {
    title: title-3,
    desc: description-3
  },
  {
    title: title-4,
    desc: description-4
  }
]

我希望循环遍历数组，以便可以按如下方式放置元素:

<div class="row">
  <div class="col-sm-6">
    {{ elements[0].title }}
    {{ elements[0].desc }}
  </div>
  <div class="col-sm-6">
    {{ elements[1].title }}
    {{ elements[1].desc }}
  </div>
</div>
<div class="row">
  <div class="col-sm-6">
    {{ elements[2].title }}
    {{ elements[2].desc }}
  </div>
  <div class="col-sm-6">
    {{ elements[3].title }}
    {{ elements[3].desc }}
  </div>
</div>

...等等。

如果我们可以通过 ng-repeat 同时获取两个连续的元素并将其传递给指令，就可以实现这一点。这可以做到吗？另外，如果是这样，在指令内如何处理获取的数组对象？

Answer 1

我将使用 $index 属性来执行此操作。使用 ng-if 隐藏效率有点低，如果这是一个巨大的重复，您可能需要一个更优雅的解决方案。

<div class="row" ng-repeat="element in elements" ng-if="$index <=  elements.length /2">
  <div class="col-sm-6">
    {{ elements[$index*2].title }}
    {{ elements[$index*2].desc }}
  </div>
  <div class="col-sm-6" ng-if="elements[$index*2 + 1]"> //ng-if for if you want to remove last element if odd array.
    {{ elements[$index*2 + 1].title }}
    {{ elements[$index*2 + 1].desc }}
  </div>
</div>