Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Programmatically set active tab of ons-tabbar



  • 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?


  • Onsen UI

    @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).



  • @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).


  • Onsen UI

    @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.



  • @Fran-Diox Hi , I am trying to create my angular js onsen app that it has a navigator and 2 template that first template has got side and other tabbar inside itself . i must say that i am creating dynamic them . i know that addition to navigator there are 2 inner navigation for side and tabbar . so my question is how can i route between ons-pages that exist inside templates . for example i am in settings page in tabbar that it has a button for navigato to home page that exist in side menu content .