如何将角度 ui-sortable 列表拆分为两个偶数列？

Question

我正在使用 angularJS ui-sortable 指令对我的数组进行排序。代码如下所示：

<ul ui-sortable ng-model="items">
  <li ng-repeat="item in items">{{ item }}</li>
</ul>

有没有办法将视图中的列表分成两个偶数列？ 例如，现在我的列表看起来像：
1
2
3
4

我想要实现的是将列表分成两列，如下所示：
1|3
2|4

在这种情况下，我只想在第一列已满（包含两个以上的元素）时才开始填充第二列。

更新：感谢那些回答我的问题并给我有用的想法的人。我已经为这种情况制定了解决方案，如果有人遇到同样的情况，这可能会很有用：

1) 在您的控制器中，将主数组拆分为两个长度相等的数组
2) 在您的视图中创建两个可 ui 排序的列表（每个列表对应一个单独的列）。每个 ui-sortable 列表都必须设置 ui-sortable 选项，允许将项目从第一个列表拖放到第二个列表，反之亦然。
3) 在控制器中定义 ui-sortable 选项。选项必须包含 connectWith 属性（允许在单独的列表之间拖放项目）和保持列表长度相同的逻辑。我的看起来像这样：

    $scope.sortableOptions = {
    stop: function () {
            // if the first column contains more than 30 elements, move last element to the top of the next column
            if ($scope.tpPart1.length > $scope.halfListLength) {
                $scope.tpPart2.unshift($scope.tpPart1[$scope.halfListLength]);
                $scope.tpPart1.splice($scope.halfListLength, 1);
            }
            // if the second column contains more than 30 elements, move the first element to the end of the first column
            if($scope.tpPart2.length > $scope.halfListLength) {
                $scope.tpPart1.push($scope.tpPart2[0]);
                $scope.tpPart2.splice(0, 1);
            }
        },
        connectWith: ".list-group"
};

差不多就是这样。希望有人觉得这很有帮助。

Answer 1

我创建了一个服务来按列或行拆分数组。 您可以使用双 ng-repeat 来迭代子集

<ul ng-repeat="col in main.itemsCols">
  <li ng-repeat="item in col">{{ item.text }}</li>
</ul>

工作示例here

Answer 2

您可以只使用两个ng-repeats，并将第一个限制在列表的前半部分，第二个限制在列表的后半部分

<ul ui-sortable class="left-column">
  <li ng-repeat="item in items | limitTo:items.length/2">{{ item }}</li>
</ul>
<ul ui-sortable class="right-column">
  <li ng-repeat="item in items | limitTo:items.length/2:items.length/2">{{ item }}</li>
</ul>

注意：您必须在控制器中采用 items.length/2 的上限才能使其适用于奇数长度的数组，但这是基本思想