Different Side Menus for different tabs

ionic-v1
1

Hi all,

Can someone help me with an app i am trying to build where i need a tab based ui. But i need different side menus for different tabs. So that when i select a tab , the side menu changes accordingly with different menu items.

2

  1. Add a $rootScope variable to hold the name of your tab. Example:
    $rootScope.selectedTabName= 'home';

  2. In your tabs controller (create one if it doesn’t exist already) add the following function

    $scope.switchTab = function(tabName){ $rootScope.selectedTabName = tabName; };

  3. In your tabs html code add the following attribute to each ion-tab element you have, make sure to change the string that refers to the tab name:
    on-select="switchTab('home')"

  4. Add a controller for your menu that does the following:

    // Set all the menu items for different tabs here var menuItems = { 'home' : [ { title: 'Item 1', link: '#/app/item1' }, { title: 'Item 2', link: '#/app/item2' }, { title: 'Item 2', link: '#/app/item2' } ], 'mypage' : [ { title: 'Item 1', link: '#/app/item1' }, { title: 'Item 2', link: '#/app/item2' }, { title: 'Item 2', link: '#/app/item2' } ] }; // Set the menu items to which ever tab is selected $scope.menuItems = menuItems[$rootScope.selectedTabName];

What I recommend is that one of the menu items will be under ‘default’ and then change $scope.menuItems to the following to avoid errors (and to set a default menu items set):
$scope.menuItems = menuItems[$rootScope.selectedTabName] || menuItems['default'];

  1. Finally in your menu html do the following:

    <ion-item ng-repeat="item in menuItems" ng-href="{{item.link}}"> {{item.title}} </ion-item>

I hope that helps.

Notes:

  • Not sure if you are supposed to put brackets inside of the ng-href
  • You can also add an additional field to hold icon class name, and add that to your menu html as well.