使用 AngularJS 设置活动选项卡样式 [英] Set active tab style with AngularJS
本文介绍了使用 AngularJS 设置活动选项卡样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在 AngularJS 中设置了这样的路由:
I have routes set in AngularJS like this:
$routeProvider
.when('/dashboard', {templateUrl:'partials/dashboard', controller:widgetsController})
.when('/lab', {templateUrl:'partials/lab', controller:widgetsController})
我在顶部栏上有一些链接样式为选项卡.如何根据当前模板或网址将活动"类添加到选项卡?
I have some links on the topbar styled as tabs. How can I add 'active' class to a tab depending on current template or url?
推荐答案
一种无需依赖 URL 即可解决此问题的方法是在 $routeProvider
配置期间为每个部分添加自定义属性,例如这个:
A way to solve this without having to rely on URLs is to add a custom attribute to every partial during $routeProvider
configuration, like this:
$routeProvider.
when('/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: widgetsController,
activetab: 'dashboard'
}).
when('/lab', {
templateUrl: 'partials/lab.html',
controller: widgetsController,
activetab: 'lab'
});
在控制器中公开 $route
:
function widgetsController($scope, $route) {
$scope.$route = $route;
}
根据当前活动标签设置active
类:
Set the active
class based on the current active tab:
<li ng-class="{active: $route.current.activetab == 'dashboard'}"></li>
<li ng-class="{active: $route.current.activetab == 'lab'}"></li>
这篇关于使用 AngularJS 设置活动选项卡样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文