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

Question

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.

sminutoli · Accepted Answer · 2015-12-03 21:00:47Z

0

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

answered Dec 3, 2015 at 21:00

sminutoli

8414 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3016239 Over a year ago

Thanks for reply. The problem here is that ui-sortable directive has to be applied on <ul> element. Then the result is that i cant drag element from one <ul ui-sortable> to another <ul ui-sortable>(from one column to another). Any ideas how to solve this?

sminutoli Over a year ago

You can try something like that: plnkr.co/edit/gSBe6o64L3TnxDvNvsqe?p=preview, I let the css magic up to you, but if you look at the generated markup you'll get one <ul>

rob · Accepted Answer · 2015-12-03 21:03:10Z

0

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

answered Dec 3, 2015 at 21:03

rob

18.7k13 gold badges73 silver badges95 bronze badges

1 Comment

user3016239 Over a year ago

Thanks for reply.I have already thought of this idea to use ng-repeat twice. However in this case i also have to use ui-sortable directive twice, which breaks the ability do drag and drop items from one column to another. Any thoghts how to solve it?

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related