Как включить / отключить вкладку в AngularJS front end

Question

У меня есть три вкладки на моей странице.Я не могу правильно включить / отключить вкладки. Когда я нажимаю на вкладку, происходит маршрутизация, которая приводит меня к нужной странице, но вкладка остается только активной. Когда в следующий раз я снова нажимаю на вкладку, она становится неактивной.

Интересно, что если я удалю приведенный ниже фрагмент кода, я смогу правильно включить / отключить вкладки.

'window.location.assign (view);'

IЯ новичок в 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

Попробуйте добавить имя класса внутри одинарной кавычки - 'active'

Как это:

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

Answer 2

попробуйте использовать ng-класс без функции, как я сделал здесь:

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