Aug 4, 2015

OnsenUI: Change tab without pressing ons-tabber's ons-tab (with AngularJs)

I have been searching around for changing tab with AngularJs $scope function, without pressing on the ons-tabber's tab.
This function will do the trick setActiveTab()
First, you have to specify name for the tabbar,
(eg. ons-tabbar[var="myTabbar"])

use setActiveTab() with index (just like array, start from 0) for myTabbar:
myTabbar.setActiveTab(1) for my case below.

AngularJs

var app = angular.module('app', ['onsen']);

app.controller('myCtrl', ['$scope', function($scope) {
  $scope.goHome = function() {
    // setActiveTab(index, options)
    myTabbar.setActiveTab(1, {animation: 'fade'});
  };
}]);

Html

<ons-page ng-controller="myCtrl">
  <ons-toolbar>
    <div class="right">
      Toolbar - myCtrl
    </div>
  </ons-toolbar>
  
  <ons-button ng-click="goHome()">Go Home</ons-button>

  <ons-tabbar var="myTabbar">
    <ons-tab active="true" icon="ion-images" label="App" no-reload="" page="app.html" persistent=""></ons-tab>
    <ons-tab icon="fa-user" label="Home" no-reload="" page="home.html" persistent=""></ons-tab>
  </ons-tabbar>
</ons-page>

Summary
The main part:

  • use variable name for ons-tabbar
  • use setActiveTab(index) with the tabbar variable name to redirect

1 comment:

Hey, thank you for spending time leaving some thoughts, that would be really helpful as encouragement for us to write more quality articles! Thank you!