Angular UI Bootstrap手风琴切换全部

时间:2015-07-16 11:42:16

标签: angularjs angular-ui-bootstrap

我遇到手风琴组切换/全部崩溃的问题。

只要我不扩展/折叠个别手风琴组,扩展折叠就可以正常工作。 我希望扩展,折叠按钮可以作为手风琴组的重置。这意味着无论各组如何打开,按下崩溃/展开都应适用于所有组。

任何建议都会受到欢迎。

代码:

 <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

1 个答案:

答案 0 :(得分:1)

这是因为角度如何与观察范围变量一起工作。有多种解决方法:

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

    $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