CODEWITHSUNDEEP
javascriptangularjsionic-framework
Mr. Dmrc
Mr. Dmrc

Reputation: 21

Ionic tab menu item hide

<ion-tabs class="tabs-icon-top tabs-color-active-positive ">
<!-- Anasayfa Tab -->
  <div ng-if="showDiv=true">
    <ion-tab title="Home" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/chats">
        <ion-nav-view name="tab-chats"></ion-nav-view>
    </ion-tab>
  </div>
  <!-- Giriş Yap Tab -->
  <div ng-if="showDiv=true">
    <ion-tab title="Log-in" icon-off="ion-person-stalker" icon-on="ion-person-stalker" href="#/tab/login">
        <ion-nav-view name="tab-login"></ion-nav-view>
    </ion-tab></div>
  <!-- Kayıt Ol Tab -->
  <div ng-if="showDiv=true">
    <ion-tab title="sign-in" icon-off="ion-person-add" icon-on="ion-person-add" href="#/tab/register">
        <ion-nav-view name="tab-register"></ion-nav-view>
    </ion-tab>
  </div>
  <!-- Hakkımızda Tab -->
  <div ng-if="showDiv=false">
    <ion-tab title="Information" icon-off="ion-information" icon-on="ion-information-circled" href="#/tab/info" >
        <ion-nav-view name="tab-info"></ion-nav-view>
    </ion-tab>
  </div>
</ion-tabs>

I want to hide the tab menu item home, log-in and sign-in then user enter. 

$scope.showDiv = "true";
console.log('fired');
$scope.showDiv = !$scope.showDiv;

I am trying but it does not work.

Upvotes: 0

Views: 94

Answers (1)

Avinash Rathod
Avinash Rathod

Reputation: 610

You can hide ion-tab using "hidden" attribute 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-nav-view name="tab-chats"></ion-nav-view>
    </ion-tab>
    <ion-tab hidden="{{condition}}" title="Log-in" icon-off="ion-person-stalker" icon-on="ion-person-stalker" href="#/tab/login">
        <ion-nav-view name="tab-login"></ion-nav-view>
    </ion-tab>
</ion-tabs>

Upvotes: 3

Related Questions