Javascript 在Bootstrap UI accordion中实现全部展开按钮

我正在使用uib accordion指令，我想添加一个按钮来展开/关闭accordion中的所有元素。我的代码如下：

<uib-accordion close-others="false">
    <div align="right">
      <a href="" ng-click="showFunc = !showFunc"> {{ showFunc ? "Hide all" : "Show all" }} </a>
    </div>
    <uib-accordion-group is-open="showFunc" ng-repeat="fun in functions" heading="{{ fun.name }}" is-disabled="!fun.show">
    </uib-accordion-group>

当我单击“全部展开”按钮时，只要不单独单击每个面板，就会发生这样的情况：在面板范围内创建变量showFunc，is show指令从中获取变量showFunc

如何做到这一点？我使用的是angular 1.6.2

---

谢谢。

我认为您在不同的上下文中混合了不同的变量（ngRepeat的每次迭代都会创建不同的上下文，并且您错误地（？）为每个变量分配了不同的showFunc变量），并且造成了混乱

您可以做的是为手风琴分配一个全局变量，将其切换到按钮单击，然后将所有<代码>打开<代码>对象属性分配到该值，我将<代码>打开<代码>属性绑定到每个对象，以便轻松遍历对象并访问它

HTML

<div uib-accordion-group is-open="fun.open" ng-repeat="fun in funcs" class="panel-default"
     heading="{{ fun.name }}">
  {{fun.name}}
</div>

为简单起见使用

$scope.allOpen = false; // all are closed

// call this function on button click
$scope.openAll = function() {
    $scope.allOpen = !$scope.allOpen; // toggle here 

    $scope.funcs.forEach((f) => {
        f.open = $scope.allOpen;
    });
};