[英]How to make a tab active from the beginning in Angular Bootstrap UI?
[英]How to active tab in Angular Bootstrap UI after change route
我在Angular Bootstrap UI中使用了tab组件 ,在我的Angularjs应用程序中使用了ui-router进行路由。
现在我想在更改路线后激活其中一个标签。 事实上,我有一个搜索路线,我想更改标签,因为搜索选项 (用户可以选择他们想要搜索的位置)。
我解决了我的问题!
如果每个选项卡都有独占路由,我们可以使用angular ui router sticky来处理这个问题。
使用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'
}
}
})
并激活每个选项卡可以使用: ui-sref-active-eq='active'
和.active
类更改活动选项卡样式
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.