在Bootstrap UI的uib-accordion中实现展开/收起全部按钮

我猜你点击按钮后应该遇到了页面刷新、状态丢失的问题吧？这是因为你的代码里有个小坑，我帮你拆解下问题和解决方案：

先搞定最核心的页面刷新问题 #

你用的<a href="" ...>会触发浏览器默认的跳转行为，页面一刷新，Angular里的showFunc状态直接重置，自然看不到预期的展开/收起效果。解决这个有两种简单方式：

方法1：修改a标签的href属性 #

把href=""改成href="#"，这样点击只会锚定到页面顶部，不会触发页面重载：

<a href="#" ng-click="showFunc = !showFunc">
  {{ showFunc ? "Hide all" : "Show all" }}
</a>

方法2：换成button标签（更推荐） #

用按钮代替链接，彻底避免跳转问题，样式可以自己调整成链接的样子：

<button type="button" ng-click="showFunc = !showFunc" style="background:none; border:none; color:blue; cursor:pointer;">
  {{ showFunc ? "Hide all" : "Show all" }}
</button>

进阶：更智能的全切换逻辑 #

上面的方案是把所有面板的is-open绑定到同一个showFunc，属于强制全开/全关。如果想要更灵活的切换（比如当前部分面板开、部分关，点击按钮后反转所有可用面板的状态），可以给每个面板单独维护状态：

步骤1：在控制器里扩展函数数据并添加切换方法 #

// 给functions数组里的每个项加上isOpen初始状态
$scope.functions = [
  { name: '函数1', show: true, isOpen: false },
  { name: '函数2', show: true, isOpen: true },
  { name: '函数3', show: false, isOpen: false }
];

// 编写全切换的逻辑方法
$scope.toggleAllPanels = function() {
  // 先判断当前所有可用面板是否都已展开
  const allExpanded = $scope.functions.every(fun => fun.show && fun.isOpen);
  
  // 遍历所有函数，只给未禁用的面板设置相反状态
  $scope.functions.forEach(fun => {
    if (fun.show) {
      fun.isOpen = !allExpanded;
    }
  });
  
  // 更新按钮文字的显示状态
  $scope.showFunc = !allExpanded;
};

步骤2：修改模板绑定逻辑 #

<uib-accordion close-others="false">
  <div align="right">
    <button type="button" ng-click="toggleAllPanels()">
      {{ showFunc ? "Hide all" : "Show all" }}
    </button>
  </div>
  <uib-accordion-group 
    is-open="fun.isOpen" 
    ng-repeat="fun in functions" 
    heading="{{ fun.name }}" 
    is-disabled="!fun.show">
    <!-- 这里放入你的面板内容 -->
  </uib-accordion-group>
</uib-accordion>

这样处理后，禁用的面板（fun.show为false）不会被操作，按钮文字也能准确反映当前所有可用面板的状态。

内容的提问来源于stack exchange，提问作者isaky