CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerangular-routing
Robert
Robert

Reputation: 27

Angular Routing multi tabs

I have an issue with Angular routing on our project. Take a look at the example page. Example page Select Settings in main nav bar. You can see there 3 tabs. General, Email and Sms. Select Email tab. It has two "subtabs" where Email tab1 is preselected (this is expected behavior). Now the issue is comming: select second subtab Email tab2, and main Email tab is deselected. How can we ensure to have selected also main Email tab when the Email tab 2 is selected?

P.S.: The same issue is with SMS tab.

Javascript code you can find also on demo page:

var app = angular.module('plunker', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise("/");

  $stateProvider
          .state("home", {
              url: '/',
              templateUrl: 'home.html',
              data: {}
          })
          .state('settings', {
              url: '/admin-settings',
              templateUrl: 'admin_settings.html',
              data: {}
          })
          .state('settings.general', {
              url: '/general',
              templateUrl: 'admin_settings_general.html',
              data: {}
          })
          .state('settings.email', {
              url: '/email',
              templateUrl: 'admin_settings_email.html',
              data: {}
          })
          .state('settings.email.tab1', {
              url: '/tab1',
              templateUrl: 'admin_settings_email_tab1.html',
              data: {}
          })
          .state('settings.email.tab2', {
              url: '/tab2',
              templateUrl: 'admin_settings_email_tab2.html',
              data: {}
          })
          .state('settings.sms', {
              url: '/sms',
              templateUrl: 'admin_settings_sms.html',
              data: {}
          })
          .state('settings.sms.tab1', {
              url: '/tab1',
              templateUrl: 'admin_settings_sms_tab1.html',
              data: {}
          })
          .state('settings.sms.tab2', {
              url: '/tab2',
              templateUrl: 'admin_settings_sms_tab2.html',
              data: {}
          })
    ;
});

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});


app.controller("AdminSettingsCtrl", function($scope){
  $scope.settingsTabs = [
    {name: 'GENERAL', route: 'settings.general'},
    {name: 'EMAIL', route: 'settings.email.tab1'},
    {name: 'SMS', route: 'settings.sms.tab1'}
  ];
});

app.controller("AdminSettingsEmailCtrl", function($scope){
  $scope.emailTabs = [
    {name: 'EMAIL TAB1', route: 'settings.email.tab1'},
    {name: 'EMAIL TAB2', route: 'settings.email.tab2'}
  ];
});

app.controller("AdminSettingsSmsCtrl", function($scope){
  $scope.smsTabs = [
    {name: 'SMS TAB1', route: 'settings.sms.tab1'},
    {name: 'SMS TAB2', route: 'settings.sms.tab2'}
  ];
});

Thank you.

Upvotes: 0

Views: 1213

Answers (1)

user3249448
user3249448

Reputation: 1399

You can create one variable in "AdminSettingsCtrl" which will track selected TAB info.Like below

$scope.activeTab="GENERAL"; // Default selected
   $scope.tabClicked = function(tab){ //function will trigger when TAB selected
     console.log(tab);
    $scope.activeTab = tab;
  }

Remove "ui-sref-active="active"" and add ng-class to your admin_settings.html

<li role="presentat" ng-repeat="tab in settingsTabs" ng-class="{active : activeTab == tab.name}">

This will resolve your issue. I have updated same example with above changes. you can take a look. http://plnkr.co/edit/gCH1AbhjL0MzbEvro7jN?p=preview

Upvotes: 2

Related Questions