Показать только один элемент панели, используя Angularjs

Question

Я новичок в Angularjs и пытаюсь понять, как работают разные модули. Итак, я работаю над проектом, в котором я хочу создать аккордеонный стиль для страницы, в котором таблица отображается при нажатии кнопки на панели. HTML-код, который создает (динамически из базы данных) элементы div, которые я изменяю, публикуется ниже. Проблема в том, что на этой панели может отображаться любое количество таблиц, хотя мне нужно открывать только одну за раз, поэтому, когда один открывается, другой открывается до его закрытия. Есть идеи, как мне добиться этой функциональности? (Я предполагаю, что ошибка в том, что переменная showDB является локальной для каждой области таблицы, но я не знаю, как ее обойти). Спасибо!' `

<div ng-repeat="(key, value) in data.services">
    <div ng-show="showSection(key)" class="top_panel-section">
        <button class="btn top_btn btn-header" type="button" name="showDB"
            ng-click="showDB=!showDB">{{key}}</button>

        <table ng-show="showDB"
            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>
</div>

Answer 1

Да, вы должны удалить эту локальную переменную showDB, чтобы получить то, что вам нужно.

Вы можете легко заменить его на $scope.activeKey и оценить его по

<button ... name="showDB" ng-click="activateKey(key)">{{key}}</button>

А в вашем контроллере:

$scope.activeKey = null;
$scope.activateKey = function (keyToBeActivated) {
   $scope.activeKey = keyToBeActivated;
}

Теперь вы можете достичь этой эксклюзивности, проверив:

<table ng-show="activeKey === key" ... >

---

Использование таблицы $ index в качестве уникального поля: (доступно из ng-repeat)

<button ... name="showDB" ng-click="activateKey($index)">{{key}}</button>

И

<table ng-show="activeKey === $index" ... >