How can I create a sortable accordion with AngularJS?

Question

I found ui sortable and got it working nicely for simple lists and the like. My application already uses the ui-bootstrap and I want to sort the accordion elements.

The html looks nice:

<div ng:controller="controller">
    <accordion ui:sortable ng:model="list">
        <accordion-group ng:repeat="item in list" class="item">
            <accordion-heading>{{item}}</accordion-heading>
        </accordion-group>
    </accordion>
</div>

However, while this works with the accordion bits swapped for ul/li etc. it does not work for the accordion element. Here is the non working fiddle. The drag action just picks up the entire accordion.

Is this a bug or am I doing something wrong?

Alex JM · Accepted Answer · 2014-12-24 13:17:36Z

5

I've came across this trouble. I've solved using a $decorator, which is very useful to edit third-party libraries without touching the core. The exactly code is:

yourModule.config(['$provide', function ($provide){
    $provide.decorator('accordionDirective', function($delegate) { 
        var directive = $delegate[0];
        directive.replace = true;
        return $delegate;
    });
}]);

What the code does is replace the template that the accordion directive is wrapping, so now the ng-repeat is a direct child of the ui-sortable directive, and it should work.

Also, as @Dylan says, I suggest to use a "handler" to prevent the accordion from opening when sorting.

answered Dec 24, 2014 at 13:17

Alex JM

1,0942 gold badges11 silver badges32 bronze badges

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

4 Comments

Paul Whipp Over a year ago

This is interesting. I will look at it as a decent solution if I need to revisit the code.

Paul Whipp Over a year ago

No, I rewrote the accordion with my own directive and moved on. I will try your suggestion when I revisit the code or need to do the same thing again.

Thodoris Greasidis Over a year ago

@AlexJ liked your solution. Created a mock plunk here.

Alex JM Over a year ago

Hi @ThodorisGreasidis, thanks! It would be useful to show it ;)

Dylan · Accepted Answer · 2014-10-23 07:27:37Z

1

I was going suggest using a handle in the sort options, but it doesn't seem to help.

$scope.sortableOptions = {
    handle: '.handle'
}

Here's a Plunkr

I'm gonna say the 2 just don't play well together.

You may have better luck with something like http://jimliu.github.io/angular-ui-tree/

answered Oct 23, 2014 at 7:27

Dylan

4,7831 gold badge22 silver badges27 bronze badges

3 Comments

Paul Whipp Over a year ago

Cool demo of angular-ui-tree. The items don't expand (other than for the subtree elements which is not something I need) - so it is not an accordion. I'll wait a bit in the hope of an accordion style solution. Thanks for your input.

Dylan Over a year ago

I would probably use the sortable because its hard to recreate and just improvise an accordion because it is super simple. plnkr.co/edit/Ydx3Lo?p=preview

Paul Whipp Over a year ago

I followed the advice and improvised the accordion.

Collectives™ on Stack Overflow

How can I create a sortable accordion with AngularJS?

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related