我正在从服务中获取数据,因此 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-openaccordion-group属性绑定(bind)到 Controller 中的某个变量来对其进行控制。然后将按钮链接到 Controller 中的某个函数,该函数将所有这些变量设置为truefalse

Here是关于Plunker的一个示例。

10-05 21:06
查看更多