jQuery Accordion and Angular JS

Question

I'm trying to make a jQuery accordion from an Angular JS ng-repeat directive. The code doesn't match the example in jQuery UI and it doesn't work. The element with ng-repeat appears to be messing it up. I want h3 as the title and the div below as the content. Repeat for each details.dataset. I've tried without the Ang JS command and it works, so the javascript libraries are loaded correctly.

$(document).ready(function () { $("#myAccordion").accordion(); })

<div id="myAccordion">
    <div class="dockListing" ng-repeat="data in details.dataset">
        <h3>{{data.name}}</h3>
        <div>
            <p><strong>Data 1:</strong>    
                {{data.content}}
            </p>
        </div>
     </div>
</div>

you can't really mix that way - you should write a new directive. — Daniel A. White
– Daniel A. White, Commented Feb 16, 2015 at 14:49

Abhishek Pachal · Accepted Answer · 2015-02-16 15:19:05Z

2

here $(document).ready(...) section is loading first and it is arranging whatever it is getting inside the "#myAccordion" div in accordion format.And then the "ng-repeat" is taking place and fetching "details.dataset".So, first make sure "details.dataset" arrives first and then the " **** $("#myAccordion").accordion(); **** " fires.You can use setTimeOut(time) function or any callback function to achieve that.

answered Feb 16, 2015 at 15:19

Abhishek Pachal

5547 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

jQuery Accordion and Angular JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related