Tips for setting a tab as active upon loading from a new page

Question

Tips for setting a tab as active upon loading from a new page

I have multiple sub-menus on my Manage Profile page. The issue I am facing is that when navigating from a different page to a specific menu, such as Change Password or Payment Gateway, the default active tab is not being set properly. I need some guidance on how to resolve this.

Current Page:

<ul class="nav nav-pills nav-justified" >
    <li class="tablist" ng-class="tab === 1? 'active' : ''">
        <a ng-click="changeTab(1)" style="cursor: pointer;"><b>MANAGE PROFILE</b></a>
    </li>
    <li ng-class="tab === 2? 'active' : ''" style="border-left: 1px solid white; border-right: 1px solid white;">
        <a ng-click="changeTab(2)" style="cursor: pointer;"><b>CHANGE PASSWORD</b></a>
    </li>
    <li ng-class="tab === 3? 'active' : ''">
        <a ng-click="changeTab(3)" style="cursor: pointer;"><b>PAYMENT HISTORY</lt;b></a>
    </li>
</ul>

JS:

$scope.tab = 1;

$scope.changeTab = function(idx)
{
    $scope.tab = idx;
};

app.js:

 .when('/manageProfile', {
                controller: 'ManageProfileController',
                templateUrl: 'view/manageProfile.view.html',
                controllerAs: 'vm'
            })

Profile.html

<li><a href=#/manageProfile>ManageProfile</a></li>
<li><a href =#/manageProfile>ChangePassword</a></li>

How can I ensure that the Change Password tab is automatically set as active when selected in the profile page?

javascript html css angularjs

Answer 1

Answer №1

I completed this part of my project and would like to share my routes and controllers with you.

garageCtrl.js

class GarageController {
  /*@ngInject*/
 constructor($state,$stateParams) {
 this.$state = $state;
 this.$stateParams = $stateParams;

 this.filter = this.$stateParams.filter || 'all';

// Setting the initial tab based on the URL parameters
switch(this.filter) {
  case 'all': {
    this.activeTab = 0;
    break;
  }
  case 'commercial': {
    this.activeTab = 1;
    break;
  }
  case 'residential': {
    this.activeTab = 2;
    break;
  }
   default: null
  }
}

filterChanged(filter) {
 this.filter = filter;
 //SOME CODES FOR ASYNC//
 this.getGarageList(filter);
 this.pageChanged(this.page);
}

}

GarageController.$inject = [
  '$state',
  '$stateParams'
  ];
export default GarageController;

This snippet shows the view where I utilized a directive for the tabs using angular-bootstrap:

<uib-tabset active="$ctrl.activeTab" justified="true">
    <uib-tab index="0" heading="All"
      ng-click="$ctrl.filterChanged('all')">
    </uib-tab>
    <uib-tab index="1" heading="Commercial"
      ng-click="$ctrl.filterChanged('commercial')">
    </uib-tab>
    <uib-tab index="2" heading="Residential"
      ng-click="$ctrl.filterChanged('residential')">
    </uib-tab>
    <uib-tab index="3" heading="Valet"
      ng-click="$ctrl.filterChanged('valet')">
    </uib-tab>
  </uib-tabset>

Here is my routes.js, making use of angular-ui-router:

.state('dashboard.garage', {
  url: '/dashboard/garage?page&filter',
  views: { 
    '': { template: '<garage></garage>' },
    '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8be8e4e5ffeee5ffcbefeaf8e3e9e4eaebacec"><span class="__cf_email__" data-cfemail="6dfe959493819186a3958597">[email protected]</span></a>': { 
      templateUrl: 'src/app/templates/admin.dashboard.garage.template.html' 
    }
  },
  params: {
    page: {
      value: '1',
      squash: true
    },
    filter: {
      value: 'all',
      squash: true
    }
  }
})

Answer 2

I completed this part of my project and would like to share my routes and controllers with you.

garageCtrl.js

class GarageController {
  /*@ngInject*/
 constructor($state,$stateParams) {
 this.$state = $state;
 this.$stateParams = $stateParams;

 this.filter = this.$stateParams.filter || 'all';

// Setting the initial tab based on the URL parameters
switch(this.filter) {
  case 'all': {
    this.activeTab = 0;
    break;
  }
  case 'commercial': {
    this.activeTab = 1;
    break;
  }
  case 'residential': {
    this.activeTab = 2;
    break;
  }
   default: null
  }
}

filterChanged(filter) {
 this.filter = filter;
 //SOME CODES FOR ASYNC//
 this.getGarageList(filter);
 this.pageChanged(this.page);
}

}

GarageController.$inject = [
  '$state',
  '$stateParams'
  ];
export default GarageController;

This snippet shows the view where I utilized a directive for the tabs using angular-bootstrap:

<uib-tabset active="$ctrl.activeTab" justified="true">
    <uib-tab index="0" heading="All"
      ng-click="$ctrl.filterChanged('all')">
    </uib-tab>
    <uib-tab index="1" heading="Commercial"
      ng-click="$ctrl.filterChanged('commercial')">
    </uib-tab>
    <uib-tab index="2" heading="Residential"
      ng-click="$ctrl.filterChanged('residential')">
    </uib-tab>
    <uib-tab index="3" heading="Valet"
      ng-click="$ctrl.filterChanged('valet')">
    </uib-tab>
  </uib-tabset>

Here is my routes.js, making use of angular-ui-router:

.state('dashboard.garage', {
  url: '/dashboard/garage?page&filter',
  views: { 
    '': { template: '<garage></garage>' },
    '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8be8e4e5ffeee5ffcbefeaf8e3e9e4eaebacec"><span class="__cf_email__" data-cfemail="6dfe959493819186a3958597">[email protected]</span></a>': { 
      templateUrl: 'src/app/templates/admin.dashboard.garage.template.html' 
    }
  },
  params: {
    page: {
      value: '1',
      squash: true
    },
    filter: {
      value: 'all',
      squash: true
    }
  }
})

Answer 3

Answer №2

Give this a shot

Check out this link for more information

ng-class="{'active' : tab == 1}"

Answer 4

Give this a shot

Check out this link for more information

ng-class="{'active' : tab == 1}"

Answer 5

Answer №3

Utilize the $routeParams service in AngularJS.

 var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
        $routeProvider

       .when('/manageProfile', {
            controller: 'ManageProfileController',
            templateUrl: 'view/manageProfile.view.html',
            controllerAs: 'vm'
        })
        .when('/manageProfile/:tab', {
            controller: 'ManageProfileController',
            templateUrl: 'view/manageProfile.view.html',
            controllerAs: 'vm'
        })
       //:tab is used as a route parameter
    });


    app.controller("ManageProfileController",['$scope','$routeParams' ,function ($scope,$routeParams ) {
         $scope.tab = 1;
          if($routeParams.tab=="2" || $routeParams.tab=="3"){
            $scope.tab= Number($routeParams.tab) ; //retrieving the value of route parameter "tab"
         }
    }]);


<li><a href=#/manageProfile>Manage Profile</a></li>   //no Route parameter specified
<!-- or <li><a href=#/manageProfile/1>Manage Profile</a></li>--> // default tab set to 1
<li><a href=#/manageProfile/2>Change Password</a></li> // tab value set to 2

Answer 6

Utilize the $routeParams service in AngularJS.

 var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
        $routeProvider

       .when('/manageProfile', {
            controller: 'ManageProfileController',
            templateUrl: 'view/manageProfile.view.html',
            controllerAs: 'vm'
        })
        .when('/manageProfile/:tab', {
            controller: 'ManageProfileController',
            templateUrl: 'view/manageProfile.view.html',
            controllerAs: 'vm'
        })
       //:tab is used as a route parameter
    });


    app.controller("ManageProfileController",['$scope','$routeParams' ,function ($scope,$routeParams ) {
         $scope.tab = 1;
          if($routeParams.tab=="2" || $routeParams.tab=="3"){
            $scope.tab= Number($routeParams.tab) ; //retrieving the value of route parameter "tab"
         }
    }]);


<li><a href=#/manageProfile>Manage Profile</a></li>   //no Route parameter specified
<!-- or <li><a href=#/manageProfile/1>Manage Profile</a></li>--> // default tab set to 1
<li><a href=#/manageProfile/2>Change Password</a></li> // tab value set to 2

Tips for setting a tab as active upon loading from a new page

Answer №1

Answer №2

Answer №3

Similar questions

Ways to Design ASP.NET Buttons for Users with Disabilities

What steps can be taken to adjust a module required in Node.js prior to initiating the build process?

What could be causing the 404 error with my socket.io connection?

Is there a way to interact with a Bootstrap 5 dropdown in React without triggering it to close upon clicking?

Dynamic progress bar based on time remaining

Ensuring consistent placement and scrollability of two divs across all screen sizes

Is it possible to incorporate two ng-repeat directives within a single td element in a table?

The Bootstrap navigation bar fails to expand

What is the process to design and implement this button using HTML and CSS?

Enhancing Blog Navigation with PicoCMS Pagination

Collaborating on a Restangular resource across multiple controllers

Can you change the name of a key in the Firebase Realtime Database?

Data within object not recognized by TableCell Material UI element

Choose the text by clicking on a button

Recursive array filtering

Asynchronously retrieve the result from a previous NodeJS chain and forward it to a nested function for processing

The interval keeps resetting every time I want the initial one to expire first

Expanding columns to reach the full height of the page

What steps should I take to repair my image modal button?

"Switching a div's visibility when a link is clicked