Question

我是Angularjs的新手，我正在试图弄清楚它是如何运作的。所以，我正在开发一个项目，我想为一个页面实现类似手风琴的风格，当我点击一个面板按钮时会显示一个表格。创建（动态地从数据库）我修改的div元素的HTML代码发布在下面。问题是在这个面板中，可以显示任意数量的表，而我只需要一次打开一个，所以当一个打开，一个打开它应该关闭。任何想法如何我可以实现这个功能？（我假设错误是因为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" ... >

将table $ index用作唯一字段：（可从ng-repeat获得）

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

和

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

使用Angularjs仅显示面板的一个元素

1 个答案: