Angular UI Bootstrap 手风琴切换打开所有答案

【问题标题】：Angular UI Bootstrap accordion toggle open allAngular UI Bootstrap 手风琴切换打开所有
【发布时间】：2015-07-16 11:42:16
【问题描述】：

我在手风琴组切换/全部折叠时遇到问题。

只要我不展开/折叠单个手风琴组，展开折叠就可以正常工作。我希望展开、折叠按钮充当手风琴组的重置。这意味着无论单个组是如何打开的，按下折叠/展开全部都应该适用于所有组。

欢迎提出任何建议。

代码：

 <button class="btn btn-default btn-sm" ng-click="expandAll()">Expand all</button>
    <button class="btn btn-default btn-sm" ng-click="collapseAll()">Collapse all</button>

    <accordion close-others="false">
            <accordion-group is-open="firstGroupOpen">
        <accordion-heading>
            <div>
                First
                <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-up': firstGroupOpen, 'glyphicon-chevron-down': !firstGroupOpen}"></i>
            </div>
        </accordion-heading>
        test
        test
    </accordion-group>

    <accordion-group is-open="secondGroupOpen">
        <accordion-heading>
            <div>
                Second
                <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-up': secondGroupOpen, 'glyphicon-chevron-down': !secondGroupOpen}"></i>
            </div>
        </accordion-heading>
        test
        test
    </accordion-group>
</accordion>

Plunker：Plunk

【问题讨论】：

标签： angularjs angular-ui-bootstrap

【解决方案1】：

发生这种情况是因为 Angular 如何与观察范围变量一起工作。对此有多个修复：

定义范围对象并将所有变量分配给该对象（参见下面的示例）
使用controller as syntax（IMO 最佳解决方案）
更新变量后使用$scope.apply()（这会触发整个角度摘要，因此可能是一个繁重的操作）

第一个解决方案示例：

$scope.accordion = {
  firstGroupOpen: false,
  secondGroupOpen: false
}

$scope.expandAll = function () {
    $scope.toggleOpen(true);
};

$scope.collapseAll = function () {
    $scope.toggleOpen(false);
};


$scope.toggleOpen = function (openAll) {
    $scope.accordion.firstGroupOpen = openAll;
    $scope.accordion.secondGroupOpen = openAll;
};

见this updated plunker

【讨论】：