CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
akashrajkn
akashrajkn

Reputation: 2315

angularjs expand all accordion inside ng-repeat

I am getting data from a service, so the number of accordions will be variable. I used ng-repeat to dynamically display the accordion

<div ng-controller = "groupController">

<div ng-repeat = "groups in groupNames">
    <div class = "panel-group" id = "accordion">
    <div class = "panel panel-default">
        <div class="panel-heading">
        <div class = "panel-title">
            <a data-toggle= "collapse" data-parent="#accordion" href="#collapse{{$index}}"> {{groups.team}} </a>
        </div>
        </div>

        <div id="collapse{{$index}}" class = "panel-collapse collapse">
        <div class = "panel-body">
            <!-- display some data in the panel body -->
        </div>
        </div>
     </div>
     </div>
</div>

<button class = "btn btn-primary">collapseAll</button>
<button class = "btn btn-primary">expandAll</button>

</div>

How do I achieve collapse all and expand all using the controller. The answers that I found mainly solved the accordion provided by ui-bootstrap. In particular how do I manipulate the hrefs in angularjs to get collapse all and expand all?

Upvotes: 3

Views: 2864

Answers (1)

MoonKnight
MoonKnight

Reputation: 136

At first you should remember to set close-others=false for your accordion, because in ui-bootstrap it is close-others=true by default which means that you can only expand one group at a time.

Then you can control the is-open property of the accordion-group by binding it to some variable in your controller. And then link the buttons to some function in your controller that set all these variables to be true or false.

Here is an example on Plunker.

Upvotes: 1

Related Questions