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

【问题标题】：How can I fetch two consecutive array objects simultaneously with ng-repeat如何使用 ng-repeat 同时获取两个连续的数组对象
【发布时间】：2015-12-24 03:52:17
【问题描述】：

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

$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 同时获取两个连续的元素并将其传递给指令，这可以实现。这可以做到吗？如果是这样，在指令中如何处理获取的数组对象？

【问题讨论】：

标签： javascript arrays angularjs angularjs-ng-repeat

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

【讨论】：

如果数组长度是奇数怎么办？在那种情况下，它不会创建一个空的第二个.col-sm-6吗？
是的。如果这不是所需的行为，我添加了一个编辑。
谢谢迪伦。这看起来像一段很好的代码。明天早上我会运行这段代码以使其适应我的问题，如果它按预期工作，你就可以保留你的幸运饼干。 =)
很高兴我能帮上忙！请记住，它确实在ng-ifs 的额外观察者中产生了一些额外的开销。首先按摩数据是最干净的解决方案。这适用于相对较小的重复（少于 500 次？）
嘿迪伦，谢谢你的回答。奇迹般有效。你能告诉我如何把这段代码放在一个指令中，比如<my-dir info="element"></my-dir>，其中element in elements在指令的容器中循环吗？我尝试将上面的代码放入指令中，但没有成功。

【解决方案2】：

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

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

然后将其用于您的 ng-repeat TemplateArray 中的数组

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

【讨论】：

我想到了这种方法，但是为了在网页上格式化而改变数据集的组织是否明智？
您不会从 API 中更改它，您会在获取数据后在客户端上对其进行按摩。理想情况下，数据 API 与视图无关。
如果您可以访问 API，那么您都是正确的，并且转换数据是有意义的。这是更好的解决方案。

【解决方案3】：

执行此操作的最佳方法可能是将您的数组预处理成由您拥有的任意多列组成的组，然后对该数组进行 ng-repeat。因此，将您的元素预处理成如下所示的内容：

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

【讨论】：

【解决方案4】：

我认为这可以在一定程度上解决你的问题

var app = angular.module('plunker', []);
app.controller('example', function($scope) {
  $scope.limit = 2;
  $scope.elements = [];
  $scope.$watch('limit', function() {
    $scope.elements = elements;
  });
  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'
  }];
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
  <script src="app.js"></script>
</head>

<body>
  <div ng-controller="example">
    <input type="number" ng-model="limit">
    <div class="row">
      <div class="col-sm-6" ng-repeat="el in elements" ng-if="$index < limit">
        {{el.title}} {{el.desc}}
      </div>
    </div>
    <p>seperator</p>
    <div class="row">
      <div class="col-sm-6" ng-repeat="el in elements" ng-if="$index >= limit">
        {{el.title}} {{el.desc}}
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

我的数组中不只有四个对象。问题中的示例数组只是示例。我希望为此找出一个万能的解决方案。上述解决方案会将索引为 0 和 1 的数组项放入第一个 .row 元素中，并将所有剩余的数组项（无论其索引如何）放入第二个 .row 元素中。
你总是可以使用一些限制变量而不是常量