Angularjs extend 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 display the accordion dynamically
<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 to achieve full anti-aliasing and unwrap everything with a controller. The answers I found mostly solved the accordion provided by ui-bootstrap. Specifically, how do I manipulate hrefs in angularjs to get everything to collapse and expand everything?
source to share
You have to remember close-others=false
for first accordion
, because the default ui-bootstrap
is that close-others=true
, which means you can only expand one group at a time.
Then you can manipulate the property is-open
accordion-group
by binding it to some variable in your controller. Then bind buttons to some function in your controller that will set all these variables as true
or false
.
Here's an example for Plunker.
source to share