如何在Ionics中有条不紊地隐藏和显示标签？

Question

案例如下:我有一个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.

我究竟做错了什么？有人能帮助我吗？

谢谢

Answer 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";
    }
}

Answer 2

聚会在这里很晚但遇到了这个问题并找到了更优雅的解决方案(imho).

使用ng-show不适用于ion-tab(不知道为什么不这样做)所以改为使用ng-if调用函数:

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

然后在你的控制器中:

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

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

Answer 3

无需添加类来隐藏和显示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>

使用此我们可以显示/隐藏选项卡.