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-repeat并将第一个限制在列表的前半部分，第二个限制在下半部分

<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的上限才能使其适用于奇数长度的阵列，但这是基本想法

如何将角度ui可排序列表拆分为两个偶数列？

2 个答案: