Conditional tabs

ionic-v1
1

For example I have these tabs:

<ion-tabs class="tabs-color-active-positive" ng-controller="TabBarCtrl">

 <ion-tab title="Home" ng-click="selectTab('tab.account')">
   <ion-nav-view name="account-tab"></ion-nav-view>
 </ion-tab>

<ion-tab title="My Wallet" ng-click="selectTab('tab.wallet')">
   <ion-nav-view name="wallet-tab"></ion-nav-view>
</ion-tab>

<ion-tab title="Rewards" ng-click="selectTab('tab.rewards')"
  <ion-nav-view name="rewards-tab"></ion-nav-view>
</ion-tab>

<ion-tab title="News" ng-click="selectTab('tab.offers')">
  <ion-nav-view name="offers-tab"></ion-nav-view>
</ion-tab>

</ion-tabs>

And then on a page under these tabs, I have a button wherein if I click such button, those tabs will be changed into something like this:

 <ion-tab title="Bills Payment" ng-click="selectTab('tab.top-bills-category')" >
  <ion-nav-view name="tab-bills-category"></ion-nav-view>
</ion-tab>

<ion-tab title="Load" ng-click="selectTab('tab.load-category')" ng-if="isCliqqed">
  <ion-nav-view name="tab-load-category"></ion-nav-view>
</ion-tab>

<ion-tab title="E-pins" ng-click="selectTab('tab.epins-category')" ng-if="isCliqqed">
  <ion-nav-view name="tab-epins-category"></ion-nav-view>
</ion-tab>

<ion-tab title="Payment Slips" ng-click="selectTab('tab.payment-category')" ng-if="isCliqqed">
  <ion-nav-view name="tab-payment-category"></ion-nav-view>
</ion-tab>

Does my desired scenario possible? If it does, would you care to help me achieve this?
Thanks!

2

{{conditional ? ifTrue : ifFalse}}
So to “merge”

<ion-tab title="Home" ng-click="selectTab('tab.account')">
<ion-nav-view name="account-tab"></ion-nav-view>
</ion-tab>

and

<ion-tab title="Bills Payment" ng-click="selectTab('tab.top-bills-category')" >
<ion-nav-view name="tab-bills-category"></ion-nav-view>
</ion-tab>

You’d end up with

<ion-tab title="{{!isCliqqed ?'Home' : 'Bills Payment'}}" ng-click="{{!isCliqqed ? selectTab('tab.account') : selectTab('tab.top-bills-category')}}" >
<ion-nav-view name="{{!isCliqqed ? 'account-tab' : 'tab-bills-category'}}"></ion-nav-view>
</ion-tab>

Does this help?

1 Like
3

Will try to implement it. Thanks!

4

Would be happy to know it helped