CODEWITHSUNDEEP
angularjsangular-ui-sortable
user3016239
user3016239

Reputation: 1

How to split angular ui-sortable list into two even columns?

I am using angularJS ui-sortable directive to sort my array. The code looks like in example:

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

Is there a way to split the list in a view into two even columns? For example now I have my list looking like:
1
2
3
4

The thing i want to achieve is to split the list in two columns to look like:
1|3
2|4

In this case I want to start filling the second column only when the first column is full (contains more than two elements).

Update: Thanks for those who answered my question and gave me useful ideas. I have made the solution for this case and if someone gets to the same situation this might be useful:

1) In your controller split the main array into two arrays of equal lenght
2) in your view make two ui-sortable lists (each list for a separate column). Each of the ui-sortable list must have set the ui-sortable options allowing to drag and drop items from first list to the second list and vice versa.
3) define the ui-sortable options in your controller. Options must contain the connectWith property (allowing to drag and drop items between separate lists) and the logic to keep lists the same length. Mine looks like that:

    $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"
};


So that's pretty much it. Hope somebody finds this helpful.

Upvotes: 0

Views: 1609

Answers (2)

rob
rob

Reputation: 18513

You could just use two ng-repeats and limit the first one to the first half of the list and the second one the the second half

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

Note: you'd have to take the ceiling of items.length/2 in your controller to get this working for arrays of odd length but that's the basic idea

Upvotes: 0

sminutoli
sminutoli

Reputation: 841

I've made a service to split an array by cols or rows. You can use a double ng-repeat to iterate the subset

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

Working example here

Upvotes: 0

Related Questions