How to active tab in Angular Bootstrap UI after change route

Question

I have used tab component in Angular Bootstrap UI and ui-router for routing in my Angularjs app.

Now I want to active one of tabs, after change route. In fact I have a search route and I want to change tabs due to the search options (that users can select where they want to search).

Use $stateParams for that to get passed parameter. And define the parameter url: '/entity/list?param1&param2 in a route if needed. — Makarov Sergey
– Makarov Sergey, Commented Sep 6, 2016 at 9:47

Morteza QorbanAlizade · Accepted Answer · 2017-11-22 04:28:20Z

I Solved my problem!

If each tab has exclusive route, we can use angular ui router sticky to handle this.

use bootstrap

users.pug

ul.nav.nav-tabs

    li.nav-item(ui-sref-active-eq='active')
       a.nav-link(ui-sref="users") users list

    li.nav-item(ui-sref-active-eq='active')
       a.nav-link(ui-sref="users.newUser") newUser

.tab-content(ui-view="usersTab")

usersList.pug

h1 users list page

newuser.pug

h1 new user page

route.js

.state('users', {
    url: '/users',
    templateUrl: 'users.html',
    controller: 'usersCtrl'
})
.state('usersList', {
    url: '/usersList',
    sticky: true,
    views: {
       "usersTab": {
           templateUrl: 'usersList.html',
           controller: 'usersListCtrl'
       }
    }
})
.state('newUser', {
    url: '/newUser',
    sticky: true,
    views: {
       "usersTab": {
           templateUrl: 'newUser.html',
           controller: 'newUserCtrl'    
       }
    }

})

And to active each tab can use: ui-sref-active-eq='active' and .active class change active tab style

Collectives™ on Stack Overflow

How to active tab in Angular Bootstrap UI after change route

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related