更改路线后如何在 Angular Bootstrap UI 中激活选项卡
How to active tab in Angular Bootstrap UI after change route
我在 Angular Bootstrap UI and ui-router 中使用 选项卡组件 在我的 Angularjs 应用程序中进行路由。
现在我想在更改路线后激活其中一个选项卡。事实上,我有一个搜索路径,我想根据搜索选项更改标签(用户可以select他们想搜索的地方)。
我解决了我的问题!
如果每个tab都有独占路由,我们可以用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
class 更改活动选项卡样式
我在 Angular Bootstrap UI and ui-router 中使用 选项卡组件 在我的 Angularjs 应用程序中进行路由。
现在我想在更改路线后激活其中一个选项卡。事实上,我有一个搜索路径,我想根据搜索选项更改标签(用户可以select他们想搜索的地方)。
我解决了我的问题!
如果每个tab都有独占路由,我们可以用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
class 更改活动选项卡样式