Question

我的页面上有三个标签。我无法正确启用/禁用这些选项卡。单击该选项卡时，会发生路由，这会将我带到所需的页面，但该选项卡仅处于活动状态。当下次再次单击该选项卡时，它将变为停用状态。

有趣的是，如果删除下面的代码，我可以使选项卡正确启用/禁用。

'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;  
}

Answer 1

尝试使用不带功能的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);
};

Answer 2

尝试在单引号中添加课程名称-“活动”

赞：

<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>

如何在AngularJS前端中启用/禁用选项卡

2 个答案: