How I can hide and show tabs conditionally in Ionics?

Question

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

Answer 1

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

Answer 2

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.