当特定选项卡处于活动状态时如何将 ng-hide 应用于按钮？

Question

我正在使用 Angular Material 构建员工管理应用程序。我在处理看起来应该非常简单的事情时遇到了一些麻烦，这让我抓狂！我有这样的设置 <md-tabs> 和 <md-button>

<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="active">
</md-tab>
<md-tab label="terminated">
</md-tab>
</md-tabs>
<md-button></md-button>

我只想让 <md-button> 在 "terminated" 选项卡处于活动状态时消失。我知道我需要对按钮应用 ng-hide，但我不知道如何引用活动选项卡。

Answer 1

使用 md-tabs 标签上的 md-selected 指令将活动选项卡绑定到控制器的属性，如下所示：

<md-tabs md-selected="selectedTab">

然后您可以根据需要在 ng-show、ng-if、ng-hide 中引用控制器属性。

（上面评论中提到的方法会起作用，但它比必要的工作更多。）

代替预先存在的控制器，您可以创建 "tabController" 像这样的东西：

app.controller('tabController' 
    function ($scope) {
        selectedTab = 0
    }
)

因为您的按钮在选项卡之外，所以您必须在包含元素上加载控制器。如果您有该级别的控制器，则只需将 selectedTab 属性添加到它即可。

当特定选项卡处于活动状态时如何将 ng-hide 应用于按钮？

How to apply ng-hide to a button when a particular tab is active?

angularjs

angular-material