如何將角度ui可排序列表分為兩個偶數列？

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>

這里的工作示例

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的上限，以使其適用於奇數長度的數組，但這是基本思想