[英]How to active tab in Angular Bootstrap UI after change route
I have used tab component in Angular Bootstrap UI and ui-router for routing in my Angularjs app. 我在Angular Bootstrap UI中使用了tab组件 ,在我的Angularjs应用程序中使用了ui-router进行路由。
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).
事实上,我有一个搜索路线,我想更改标签,因为搜索选项 (用户可以选择他们想要搜索的位置)。
I Solved my problem! 我解决了我的问题!
If each tab has exclusive route, we can use angular ui router sticky to handle this. 如果每个选项卡都有独占路由,我们可以使用angular ui router sticky来处理这个问题。
use bootstrap 使用bootstrap
users.pug 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 usersList.pug
h1 users list page
newuser.pug newuser.pug
h1 new user page
route.js 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 并激活每个选项卡可以使用:
ui-sref-active-eq='active'
和.active
类更改活动选项卡样式
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.