AngularJS实现手风琴式面板：仅显示单个展开表格的技术问询

嘿，我明白你遇到的问题了——这确实是AngularJS里ng-repeat作用域常见的小坑！你猜的没错，每个ng-repeat迭代出来的<div>都会创建自己的局部作用域，所以每个面板的showDB变量都是独立的，互相没法控制，自然就会出现多个面板同时展开的情况。

下面给你一个简单直接的解决方案，核心思路是用一个全局作用域变量来统一跟踪当前展开的面板：

1. 控制器里添加状态跟踪逻辑 #

先在你的控制器中定义一个变量，用来记录当前展开的面板key，再写一个切换面板的函数：

// 你的控制器代码
$scope.currentOpenPanel = null; // 初始状态：没有面板展开

$scope.togglePanel = function(key) {
    // 如果点击的是当前已展开的面板，就关闭它；否则切换到这个面板
    $scope.currentOpenPanel = $scope.currentOpenPanel === key ? null : key;
};

2. 修改HTML模板逻辑 #

把原来每个面板独立的showDB变量替换成全局的currentOpenPanel判断：

<div ng-repeat="(key, value) in data.services">
    <div class="top_panel-section">
        <!-- 点击按钮时调用togglePanel，传入当前面板的key -->
        <button class="btn top_btn btn-header" type="button" name="showDB" ng-click="togglePanel(key)">
            {{key}}
        </button>
        <!-- 只有当currentOpenPanel等于当前key时，才显示表格 -->
        <table ng-show="currentOpenPanel === key" class="n-table toptable table-responsive n-table-standard n-table-striped n-table-hover">
            <thead class="n-table-thead">
                <tr>
                    <th width="70%">VM Name</th>
                    <th width="30%">Status</th>
                </tr>
            </thead>
            <tbody class="n-table-body">
                <tr ng-repeat="vm in value.vms">
                    <td width="76%">{{vm.vm}}</td>
                    <td width="24%" ng-style="getStatusStyle(vm.status)"> {{vm.status}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

原理说明 #

这样所有面板共享同一个currentOpenPanel变量，每次点击按钮都会更新这个变量的值——只有与这个值匹配的面板才会显示表格，完美实现了“打开新面板时自动关闭旧面板”的手风琴效果。

如果需要默认展开某个面板，只需要把currentOpenPanel的初始值设为对应的key即可，比如$scope.currentOpenPanel = '你的默认面板key'。

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