CODEWITHSUNDEEP
javascriptangularjsionic-framework
Miguel
Miguel

Reputation: 1656

How to get the active tab in Ionic

I have tabs inside a modal with this code:

<ion-tabs class="tabs-positive tabs-top">

<ion-tab title="FIND">
<ion-view>
<ion-content>
<div class="list list-inset">
  <label class="item item-input">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="text" ng-model="data.sight" placeholder="Find events or people" ng-change="searchSight()">
  </label>
</div>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab>
   ... More tabs
</ion-tab>
</ion-tabs>

And I have a footer button that I want to perform a particular action according to the active tab, How do I get the active tab in Ionic?

Thank you very much!

Upvotes: 2

Views: 8694

Answers (2)

Ngzungu
Ngzungu

Reputation: 263

You could get the selected index of your tab using the $ionicTabsDelegate, which could possibly help you determine what action to take. 

function MyCtrl($scope, $ionicTabsDelegate) {
         if ($ionicTabsDelegate.selectedIndex() == 0){
     // Perform some action 
    }
}

Use the $getByHandle method to control specific ionTabs instances.

Example: 

$ionicTabsDelegate.$getByHandle('my-handle').selectedIndex();

Explained in further detail at the $ionicTabsDelegate API Documentation

Upvotes: 3

ryanabooth
ryanabooth

Reputation: 351

As far as I know, Ionic uses ui-router. To get the current state in UI-router, you can use the $state directive described in ui-router's API documentation here.

The 2 methods that might interest you are probably:

$state.is('state-name');
$state.includes('part-of-state-name-');

You'll need to make sure that you have $state injected into the footer's controller if you want to reference it directly in the html, or you can define a scope method or variable if you want to take that logic off the controller.

Upvotes: 3

Related Questions