CODEWITHSUNDEEP
angularjsionic-frameworkionic-view
HIRA THAKUR
HIRA THAKUR

Reputation: 17757

How to redirect to other tab in the same state?

I have a two tabs.. I show one tab by default. When a button is clicked in one tab I want to redirect to the other tab. But how do I redirect?

On click of a button how do I navigate from tab1 to tab2 considering the fact that all of it is happening inside one state?

<ion-view>
<ion-header-bar class="musiclist">
        <h1 class="title" >Playlist</h1>
</ion-header-bar>
    <ion-pane>
        <ion-tabs class="tabs-top">
            <!-- Tab 1 -->
            <ion-tab title="My Albums">
                <ion-nav-view >
                    <ion-content>
                       <!-- some content -->
                    </ion-content>
                </ion-nav-view>
            </ion-tab>
            <!-- Tab 2 -->
            <ion-tab title="Album Store">
                <ion-nav-view >
                    <ion-content>
                       <!-- some content -->
                    </ion-content>
                </ion-nav-view>
            </ion-tab>
        </ion-tabs>
    </ion-pane>
</ion-content>
</ion-view>

http://codepen.io/anon/pen/JXPyLE

Upvotes: 1

Views: 1152

Answers (1)

Dave Kidder
Dave Kidder

Reputation: 1838

You can use $ionicTabsDelegate.select by passing the $ionicTabsDelegate service into the controller and calling the select function. Since you have more than one set of tabs, you'll need to specify a delegate-handle in your HTML and reference that specific handle in the controller:

.controller('HomeTabCtrl', function($scope, $ionicTabsDelegate) {
 console.log('HomeTabCtrl');
 $scope.store = false;

 $scope.switchTabs = function(index) {
    $ionicTabsDelegate.$getByHandle('my-handle').select(index);
 }
});

  <ion-tabs delegate-handle="my-handle" class="tabs-top">
    <!-- Tab 1 -->
    <ion-tab title="My Albums" >
      <ion-nav-view ng-show="store">
        <ion-content>
          <!-- some content -->A
          <a ng-click="switchTabs(1)">go to store</a>
        </ion-content>
      </ion-nav-view>
    </ion-tab>

Upvotes: 3

Related Questions