我正在从服务中获取数据,因此 Accordion 的数量是可变的。我使用ng-repeat动态显示 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>
如何使用 Controller 实现全部折叠和全部展开。我找到的答案主要解决了ui-bootstrap提供的 Accordion 。特别是我该如何操作angularjs中的href以全部折叠并全部展开?
最佳答案
首先,您应该记住为close-others=false
设置accordion
,因为在ui-bootstrap
中,默认情况下是close-others=true
,这意味着您一次只能扩展一组。
然后,您可以通过将is-open
的accordion-group
属性绑定(bind)到 Controller 中的某个变量来对其进行控制。然后将按钮链接到 Controller 中的某个函数,该函数将所有这些变量设置为true
或false
。
Here是关于Plunker的一个示例。