javascript - angularjs expand all accordion inside ng-repeat -
i getting data service, number of accordions variable. used ng-repeat dynamically display 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 data in panel body --> </div> </div> </div> </div> </div> <button class = "btn btn-primary">collapseall</button> <button class = "btn btn-primary">expandall</button> </div>
how achieve collapse , expand using controller. answers found solved accordion provided ui-bootstrap. in particular how manipulate hrefs in angularjs collapse , expand all?
at first should remember set close-others=false
accordion
, because in ui-bootstrap
close-others=true
default means can expand 1 group @ time.
then can control is-open
property of accordion-group
binding variable in controller. , link buttons function in controller set these variables true
or false
.
here example on plunker.
Comments
Post a Comment