我的页面上有三个标签。我无法正确启用/禁用这些选项卡。单击该选项卡时,会发生路由,这会将我带到所需的页面,但该选项卡仅处于活动状态。当下次再次单击该选项卡时,它将变为停用状态。>
有趣的是,如果删除下面的代码,我可以使选项卡正确启用/禁用。
'window.location.assign(view);'
我是AngularJS / CSS等的新手,请问有人可以帮我吗?需要紧急修复。谢谢!
请在html页面和控制器中找到以下代码。
html-
<ul class="nav nav-pills nav-stacked" >
<li ng-class="{ active: isSet(1) }" style="width:130px;display:inline-block">
<a ng-click="setTab(1,'#/Employers')" style="background-color:#0072AD" ><b style="color:white">EMPLOYERS</b></a>
</li>
<li ng-class="{ active: isSet(2) }" style="width:110px;display:inline-block">
<a ng-click="setTab(2,'#/Products')" style="background-color:#0072AD"><b style="color:white">PRODUCTS</b></a>
</li>
<li ng-class="{ active: isSet(3) }" style="width:180px;display:inline-block">
<a ng-click="setTab(3,'#/ControlReports')" style="background-color:#0072AD"><b style="color:white">CONTROL REPORTS</b></a>
</li>
</ul>
控制器:
'use strict';
angular.module('Business.Header', [])
.controller('HeaderCtrl', ['$scope','$location','$rootScope',
function ($scope, $location, $rootScope) {
$scope.tab = 1;
$scope.isSet = function (tabNum) {
return $scope.tab === tabNum;
};
$scope.setTab = function (newTab, view) {
$scope.tab = newTab;
window.location.assign(view);
};
}]);
CSS:
/* text recolor */
h1, p, a {
color: #4DC9C9 !important;
}
/* button recolor */
.nav-pills > li.active > a, .btn-primary {
background-color: #6C6C6C !important;
border-color: #6C6C6C !important;
}
答案 0 :(得分:0)
尝试使用不带功能的ng-class
<ul class="nav nav-pills nav-stacked" >
<li ng-class="{ active: tab === 1 }" style="width:130px;display:inline-block">
<a ng-click="setTab(1,'#/Employers')" style="background-color:#0072AD"><b style="color:white">EMPLOYERS</b></a>
</li>
<li ng-class="{ active: tab === 2 }" style="width:110px;display:inline-block">
<a ng-click="setTab(2,'#/Products')" style="background-color:#0072AD"><b style="color:white">PRODUCTS</b></a>
</li>
<li ng-class="{ active: tab === 3 }" style="width:180px;display:inline-block">
<a ng-click="setTab(3,'#/ControlReports')" style="background-color:#0072AD"><b style="color:white">CONTROL REPORTS</b></a>
</li>
</ul>
如果这不起作用,您可以尝试以下方法:
$scope.setTab = function (newTab, view) {
$scope.tab = newTab;
window.location.assign(view);
if($scope.$$phase) $scope.$apply(); // to force after assign
};
或
$scope.setTab = function (newTab, view) {
$scope.tab = newTab;
if($scope.$$phase) $scope.$apply(); // to force before assign
window.location.assign(view);
};
答案 1 :(得分:0)
尝试在单引号中添加课程名称-“活动”
赞:
<ul class="nav nav-pills nav-stacked" >
<li ng-class="{ 'active': tab == 1 }" style="width:130px;display:inline-block">
<a ng-click="setTab(1,'#/Employers')" style="background-color:#0072AD" ><b style="color:white">EMPLOYERS</b></a>
</li>
<li ng-class="{ 'active': tab == 2 }" style="width:110px;display:inline-block">
<a ng-click="setTab(2,'#/Products')" style="background-color:#0072AD"><b style="color:white">PRODUCTS</b></a>
</li>
<li ng-class="{ 'active': tab == 3 }" style="width:180px;display:inline-block">
<a ng-click="setTab(3,'#/ControlReports')" style="background-color:#0072AD"><b style="color:white">CONTROL REPORTS</b></a>
</li>
</ul>