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不能在离子标签上工作（不知道为什么不这样做）所以改为使用ng-if来调用函数：

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

然后在你的控制器中：

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

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

Answer 3

无需添加类来隐藏和显示ion-tab。我们需要保持一个条件，以隐藏＆＃34; 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>

使用此功能，我们可以显示/隐藏标签。

Answer 4

您是否尝试过使用ng-show来调用函数？

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

在你的控制器里......

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

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

4 个答案: