如何使用ng-重复同时获取两个连续的数组对象？

Question

假设控制器中有一个数组，如下所示：

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

...and等。

如果我们可以通过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>

Answer 2

这看起来就像创建另一个要迭代的数组一样简单

$scope.TemplateArray = [
[0,1],
[2,3],
etc...
]

然后将其用于TemplateArray中的ng重复数组。

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

Answer 3

最好的方法可能是将数组预处理成多列的组，然后对数组进行ng-重复。所以，将你的元素预处理成如下所示：

$scope.processedElements = [
   [{title:'1',desc:'1d'},{title:'2',desc:'2d'},{title:'3',desc:'3d'},{title:'4',desc:'4d'}],
   [{title:'5',desc:'5d},.......      ]

];

然后

 <div ng-repeat="item in processedElements">
      {{item[0].title}} {{item[1].title}}       // etc. etc

 </div>