CODEWITHSUNDEEP
tabsionic-framework
Timbergus
Timbergus

Reputation: 3253

How I can hide and show tabs conditionally in Ionics?

The case is the following: I have a ion-tabs container with several ion-tab elements, and different users that logs into my application. What I need to do is to show or hide the ion-tab elements depending on the user type logged.

I have tried to hide just one tab to check if it is possible and the only thing that have worked is:

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

The problem is that I need to do this dynamically, and if I use a directive like ng-show="false" or my own directive to add class="ng-hide", it does not work. Not even encapsulating the ion-tab inside a divand hide this div.

What am I doing wrong? Can somebody help me?

Thanks

Upvotes: 11

Views: 14045

Answers (4)

Avinash Rathod
Avinash Rathod

Reputation: 610

There is no need to add class to hide and show ion-tab. We need to just maintain one condition for "hidden" attribute of ion-tab like following-

 <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>

Using this we can show/hide tab.

Upvotes: 5

Kevin Coulson
Kevin Coulson

Reputation: 548

Very late to the party here but encountered this problem and found a more elegant solution (imho).

Using ng-show doesn't work on ion-tab (not sure why not) so instead use ng-if to call a function:

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

Then in your controller:

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

I think this is more elegant because it means the element is never rendered rather than rendered and hidden.

Upvotes: 5

Manish Kr. Shukla
Manish Kr. Shukla

Reputation: 4477

If you are already using class attribute on ion-tab, you can modify it as follows?...

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

And in your controller...

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

Upvotes: 13

Andrew McGivery
Andrew McGivery

Reputation: 1390

Have you tried using ng-show to call a function?

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

And in your controller...

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

Upvotes: 0

Related Questions