Programmatically set active tab of ons-tabbar

wetfeet

My AngularJS app is using a tabbar design with 3 tabs.

<ons-tabbar position="auto" var="tbrView">
    <ons-tab page="tab1.html" label="Tab 1" active></ons-tab>
    <ons-tab page="tab2.html" label="Tab 2"></ons-tab>
    <ons-tab page="tab3.html" label="Tab 3"></ons-tab>
</ons-tabbar>

It has a configuration settings ons-page that allows the user to set the default ons-tab to be set active each time the app is started and each time the ons-tabbar on the main ons-page is opened.

// index.js
this.defaultTab = '0'; // Can be 0, 1 or 2.

<!-- settings.html -->
<ons-list-item tappable>
  <label class="left">
    <ons-radio name="tab1" input-id="tab1" value="0" ng-model="app.defaultTab" ng-click="tbrView.setActiveTab(0)"></ons-radio>
   </label>
   <label for="tab1" class="center">
      Tab 1
   </label>
</ons-list-item>

<ons-list-item tappable>
  <label class="left">
    <ons-radio name="tab2" input-id="tab2" value="1" ng-model="app.defaultTab" ng-click="tbrView.setActiveTab(1)"></ons-radio>
   </label>
   <label for="tab2" class="center">
      Tab 2
   </label>
</ons-list-item>

<ons-list-item tappable>
  <label class="left">
    <ons-radio name="tab3" input-id="tab3" value="2" ng-model="app.defaultTab" ng-click="tbrView.setActiveTab(2)"></ons-radio>
   </label>
   <label for="tab3" class="center">
      Tab 3
   </label>
</ons-list-item>

Here’s the problem. I do not know where is the right place to get the tab bar to set the right tab.

I have tried the following:

<ons-tabbar position="auto" var="tbrView" ons-show="tbrView.setActiveTab(app.defaultTab)">

This seems to make the tab bar keeps flashing whenever it is visible. Also the underline of the active tab is not rendered properly. ons-show is repeatedly triggered as long as the tab bar is visible even when the user is not interacting with it, and the page has loaded fully.

<ons-tabbar position="auto" var="tbrView" ons-init="tbrView.setActiveTab(app.defaultTab)">

ons-init is only run once upon app initialization I believe. Subsequently if I set the setting in the app and return to the page, the ons-init is not fired to switch the tab when the page is reopened.

ons-post-change and ons-pre-change are only triggered if the user tap on another tab, so they are not useful.

Where is the right place to set the active tab then?

Fran Diox

@wetfeet init and show are page events, not tab events. You are getting those events 3 times at least, once per page inside tabbar. I think you want to do that on init event of the tabbar’s parent page. Also, check that the event is fired by that page, not a child page (there is an example here, line 5 of JS).

wetfeet

@Fran-Diox said:

@wetfeet init and show are page events, not tab events.

I checked the reference and ons-tabbar has these attributes. I thought the events are specific to the ons-tabbar component itself.

I believe similarly ons-page also has the ons-init, ons-show, ons-hide attribute. source

You are getting those events 3 times at least, once per page inside tabbar. I think you want to do that on init event of the tabbar’s parent page. Also, check that the event is fired by that page, not a child page (there is an example here, line 5 of JS).

Fran Diox

@wetfeet They are just handlers for page events. This is useful if you want to do the same thing for all the pages inside a tabbar or a navigator, so you don’t need to specify ons-init in every single page.

Programmatically set active tab of ons-tabbar browsing