Is this the best way to hide an icon in the tab bar?

ionic-v1
1

Hi,

Apologies if there is an obvious answer here, but we can’t see anything obvious in the docs or in the forum itself.

We want to hide one of the icons in the tab bar depending on a condition. This is our original code:

<ion-tabs class="tabs-icon-top tabs-color-active-positive">
  <!-- Summary Tab -->
  <ion-tab title="Summary" icon-off="ion-android-car" icon-on="ion-android-car" href="#/tab/dash">
    <ion-nav-view name="tab-summary"></ion-nav-view>
  </ion-tab>


  <!-- Routes Tab -->
    <ion-tab title="My Routes" icon-off="ion-ios7-paper-outline" icon-on="ion-ios7-paper" href="#/tab/routes">
      <ion-nav-view name="tab-routes"></ion-nav-view>
    </ion-tab>

  <!-- My Account -->
  <ion-tab title="My Account" icon-off="ion-ios7-person-outline" icon-on="ion-ios7-person" href="#/tab/accountsettings">
  <ion-nav-view name="tab-accountsettings"></ion-nav-view>
  </ion-tab>

  <!-- Settings Tab -->
  <ion-tab title="Settings" icon-off="ion-ios7-gear-outline" icon-on="ion-ios7-gear" href="#/tab/settings">
    <ion-nav-view name="tab-settings"></ion-nav-view>
  </ion-tab>

</ion-tabs>

and we’ve simple added a div with a conditional display attached to it

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- Summary Tab -->
  <ion-tab title="Summary" icon-off="ion-android-car" icon-on="ion-android-car" href="#/tab/dash">
    <ion-nav-view name="tab-summary"></ion-nav-view>
  </ion-tab>

  <!-- Routes Tab -->
  <div ng-if="0"> <!-- Here's the new code -->
    <ion-tab title="My Routes" icon-off="ion-ios7-paper-outline" icon-on="ion-ios7-paper" href="#/tab/routes">
      <ion-nav-view name="tab-routes"></ion-nav-view>
    </ion-tab>
  </div>

  <!-- My Account -->
  <ion-tab title="My Account" icon-off="ion-ios7-person-outline" icon-on="ion-ios7-person" href="#/tab/accountsettings">
  <ion-nav-view name="tab-accountsettings"></ion-nav-view>
  </ion-tab>


  <!-- Settings Tab -->
  <ion-tab title="Settings" icon-off="ion-ios7-gear-outline" icon-on="ion-ios7-gear" href="#/tab/settings">
    <ion-nav-view name="tab-settings"></ion-nav-view>
  </ion-tab>

</ion-tabs>

Now I know that we haven’t actually added any conditional check at all in the above example just an ng-if, but this was just to see if it works OK. We have massive problems with ng-cloak so have given up getting that to work :frowning:

Is this the best way or can anybody suggest a more appropriate ‘Ionic’ way of doing it?

Thanks,

Rob

2

Bad form to reply your own posting but I’ll do it anyway.

It turns out that wrapping ion-tab in a div doesn’t work very well :frowning:

  <div ng-if="0"> <!-- Here's the new code -->
    <ion-tab title="My Routes" icon-off="ion-ios7-paper-outline" icon-on="ion-ios7-paper" href="#/tab/routes">
      <ion-nav-view name="tab-routes"></ion-nav-view>
    </ion-tab>
  </div>

We have also now found the hidden flag in http://ionicframework.com/docs/api/directive/ionTab/

This seems to work reasonably well so we’ll go with that :slight_smile: