如何在 Ionics 中有条件地隐藏和显示选项卡？答案

【问题标题】：How I can hide and show tabs conditionally in Ionics?如何在 Ionics 中有条件地隐藏和显示选项卡？
【发布时间】：2016-10-22 20:36:11
【问题描述】：

案例如下：我有一个 ion-tabs 容器，其中包含多个 ion-tab 元素，以及登录到我的应用程序的不同用户。我需要做的是根据记录的用户类型显示或隐藏ion-tab 元素。

我试图只隐藏一个标签以检查是否可行，唯一有效的是：

<ion-tab title="..." icon="..." ui-sref="..." class="ng-hide">

问题是我需要动态地执行此操作，如果我使用类似ng-show="false" 的指令或我自己的指令来添加class="ng-hide"，它不起作用。甚至没有将ion-tab 封装在div 中并隐藏这个div。

我做错了什么？有人可以帮帮我吗？

谢谢

【问题讨论】：

标签： tabs ionic-framework

【解决方案1】：

如果你已经在ion-tab上使用class属性，你可以修改如下？...

<ion-tab title="..." icon="..." ui-sref="..." class="class1 class2 {{myFunctionName()}}">

在你的控制器中...

$scope.myFunctionName = function(){
    if () {
    // return "ng-show";
    } else {
    // return "ng-hide";
    }
}

【讨论】：

像魅力一样工作！非常感谢:)
很高兴它帮助了:)。！！ (Y)

【解决方案2】：

在这里聚会很晚，但遇到了这个问题并找到了更优雅的解决方案（恕我直言）。

在 ion-tab 上使用 ng-show 不起作用（不知道为什么不这样做），所以改为使用 ng-if 来调用函数：

<ion-tab ng-if="showElement()">

然后在你的控制器中：

$scope.showElement = function() {
    //logic to return a bool
}

我认为这更优雅，因为这意味着元素永远不会被渲染，而不是被渲染和隐藏。

【讨论】：

问题在于其他选项卡首先呈现，因此该选项卡始终位于选项卡栏中的最后一个（最右侧）。
这里也一样，尝试查看如何在使用 ng-if 时将选项卡保持在最后呈现的位置

【解决方案3】：

无需添加类来隐藏和显示 ion-tab。我们只需要为 ion-tab 的“隐藏”属性维护一个条件，如下所示-

 <ion-tabs class="tabs-icon-top tabs-color-active-positive "> 
    <ion-tab hidden="{{condition}}" title="Home" icon-off="ion-ios-home- outline" icon-on="ion-ios-home" href="#/tab/chats"></ion-tab>
    <ion-tab hidden="{{condition}}" title="Log-in" icon-off="ion-person-stalker" icon-on="ion-person-stalker" href="#/tab/login">
</ion-tab>

使用它我们可以显示/隐藏标签。

【讨论】：

很高兴知道它有帮助！

【解决方案4】：

你试过用 ng-show 调用函数吗？

<ion-tab title="..." icon="..." ui-sref="..." ng-show="myFunctionName()">

在你的控制器中...

$scope.myFunctionName = function(){
    //return true or false here
}

【讨论】：

我试过了，还是不行。当我在ion-tab 中放入指令时，问题似乎出现了，因为如果我使用class="ng-hide"，它可以工作，但如果我使用ng-class="..."，它就不起作用。所以我既不能使用ng-show，也不能使用ng-hide。