使用 ng-repeat 时如何将数据分成两半？答案

【问题标题】：How to divide data to half while using ng-repeat?使用 ng-repeat 时如何将数据分成两半？
【发布时间】：2015-05-08 02:28:12
【问题描述】：

我有一些数据，我可以使用ng-repeat 将这些数据编译为div。我试图将它们分成 2 列，但找不到构建它的方法。

这是我的例子：( jsFiddle )

html：

<div ng-controller="Ctrl">
    <div class="left">
      <div ng-repeat="item in data">{{item.value}}</div>
      <!-- i've tried filter and failed -->
    </div>
    <div class="right">
      <div ng-repeat="item in data">{{item.value}}</div>
    </div>
</div>

js:

var app = angular.module('app', []);
function Ctrl($scope) {
  $scope.data = [
      {value: "a"},
      {value: "b"},
      {value: "c"},
      {value: "d"},// trying to divide from here
      {value: "e"},// and show the last part in other column
      {value: "f"},
      {value: "g"},
      {value: "h"}
  ];
}

【问题讨论】：

喜欢jsfiddle.net/1fch1221/3 ?
是的，你为什么用一个范围变量来限制自己？
@Shomz 数据像这样从后端传给我。
但是没有什么能阻止你自己传播数据。

标签： javascript angularjs filter ng-repeat

【解决方案1】：

甚至还有更简洁的解决方案，但你必须使用 angular 1.2.1：https://jsfiddle.net/1fch1221/6/

<div ng-controller="Ctrl">
<div class="left">
  <div ng-repeat="item in data" ng-if="$index < (data.length / 2)">{{item.value}}</div>
</div>
<div class="right">
  <div ng-repeat="item in data" ng-if="$index >= (data.length / 2)">{{item.value}}</div>
</div>

【讨论】：

@Mikey 例如，如果数据包含超过 8 个元素，你如何解决这个问题？总是更改 $index，这不是好的解决方案，也不是更清洁和更简单的解决方案！
@Alexander 如果涉及到列表中的动态或未知数量的项目，您是对的。手头的问题在列表中有预定义数量的项目，这就是我的答案所依据的。只是为 OP 提供一个解决方案来满足 OP 的要求。使用更清洁的方式，我的意思是一种更角度的划分列表的方式。
后编辑：现在可以处理动态数量的元素。 ng-if 里面的内容只是 javascript，所以从一个硬编码的数字改变。在此处添加注释，否则上述 cmets 没有任何意义。
@Mikey 如果您与上述解决方案相比，您的答案要好得多（也许是我的偏好）。但我喜欢上面和你的两个解决方案，最好是你的一个！
@Danish 感谢您的称赞。欣赏评论。让我敏锐地给出聪明的解决方案。

【解决方案2】：

我不知道它是否比其他答案更干净，但作为想法：

ng-repeat="item in data.slice(0, data.length / 2)"
ng-repeat="item in data.slice(data.length / 2, data.length)"

【讨论】：

【解决方案3】：

我认为这里最简单的解决方案是将您的数据数组分成 2 个不同的变量。如果你不能这样做，你也可以编写一个测试函数来决定是否显示给定的值。

<div ng-repeat="item in data" ng-show="test(item.value)"

我的建议的 JSFiddle ：here

【讨论】：

非常感谢，我的+1

【解决方案4】：

你可以使用两个变量，像这样

function Ctrl($scope) {
  $scope.data = [
      {value: "a"},
      {value: "b"},
      {value: "c"},
      {value: "d"},// trying to divide from here
      {value: "e"},// and show the last part in other column
      {value: "f"},
      {value: "g"},
      {value: "h"}
  ];

  var len = $scope.data.length,
      mid = len / 2;

  $scope.left  = $scope.data.slice(0, mid);  
  $scope.right = $scope.data.slice(mid, len);
}

Example

【讨论】：

我见过的关于这个问题的最佳解决方案。你为我节省了几分钟的开发时间。感谢分享。