Невозможно автоматически добавлять / удалять классы из ng-class для переключения выбранной вкладки

Question

Я пытаюсь переключаться между вкладками, но CSS не удаляет «выбранный» класс ранее выбранной вкладки.

Вот как я это делаю:

        <ul class="nav nav-tabs" style="margin-bottom: 2px !important; margin-left: 1px; border: none; color: black; font-weight: bold;">
            <li ng-class="{'mainTabs-active' : isActive(1) == true}" class="mainTabs" ng-click="activeTab = 1" ng-if="userAccess == 1">
                <a href="#/main/clients"> Clientes </a>
            </li>
            <li ng-class="{'mainTabs-active' : isActive(2) == true}" class="mainTabs" ng-click="activeTab = 2" ng-if="userAccess == 1">
                <a href="#/main/inventory"> Catálogos </a>
            </li>
            <li ng-class="{'mainTabs-active' : isActive(3) == true}" class="mainTabs" ng-click="activeTab = 3" ng-if="userAccess == 1">
                <a href="#/main/configuration"> Configuración </a>
            </li>
            <li ng-class="{'mainTabs-active' : isActive(4) == true}" class="mainTabs" ng-click="activeTab = 4" ng-if="userAccess == 1">
                <a href="#/main/employees"> Empleados </a>
            </li>
            <li ng-class="{'mainTabs-active' : isActive(5) == true}" class="mainTabs" ng-click="activeTab = 5" ng-if="userAccess == 2">
                <a href="#/main/sales"> Autorizaciones </a>
            </li>
            <li ng-class="{'mainTabs-active' : isActive(6) == true}" class="mainTabs" ng-click="activeTab = 6" ng-if="userAccess == 3">
                <a href="#/main/conciliation"> Conciliación </a>
            </li>
        </ul>

И функция isActive:

$scope.isActive = function(value){
    if($scope.activeTab==value){
        return true;
    }
    else{
        return false;
    }
}

Я попытался сделать это без функции, просто сравнив значения напрямую, выполнив ng-class = "{'mainTabs-active': active == n}", и тоже не сработало.

Я уже пытался искать похожие имена переменных и CSS, которые могут повлиять на это, но не смог ничего найти. Это довольно просто, но я застрял с этим некоторое время и, похоже, не приблизился к решению.

Answer 1

Ваши функции ng-click не обновляют область должным образом. Console.log - ваш друг здесь (и всегда!)

После внесения в журналы я мог сказать, что все ваши функции на всех вкладках вызывались при каждом щелчке, и все передавались как ложные. Проще удалить функцию из ng-класса и переместить ее в ng-click так:

<ul class="nav nav-tabs" style="margin-bottom: 2px !important; margin-left: 1px; border: none; color: black; font-weight: bold;">
     <li ng-class="{'mainTabs-active' : activeTab === 1}" class="mainTabs" ng-click="activateTab(1)" ng-if="userAccess == 1">
       <a href="#/main/clients"> Clientes </a>
     </li>
     <li ng-class="{'mainTabs-active' : activeTab === 2}" class="mainTabs" ng-click="activateTab(2)" ng-if="userAccess == 1">
       <a href="#/main/inventory"> Catálogos </a>
     </li>
     <li ng-class="{'mainTabs-active' : activeTab === 3}" class="mainTabs" ng-click="activateTab(3)" ng-if="userAccess == 1">
       <a href="#/main/configuration"> Configuración </a>
     </li>
     <li ng-class="{'mainTabs-active' : activeTab === 4}" class="mainTabs" ng-click="activateTab(4)" ng-if="userAccess == 1">
       <a href="#/main/employees"> Empleados </a>
     </li>
     <li ng-class="{'mainTabs-active' : activeTab === 5}" class="mainTabs" ng-click="activateTab(5)" ng-if="userAccess == 2">
       <a href="#/main/sales"> Autorizaciones </a>
     </li>
     <li ng-class="{'mainTabs-active' : activeTab === 6}" class="mainTabs" ng-click="activateTab(6)" ng-if="userAccess == 3">
       <a href="#/main/conciliation"> Conciliación </a>
     </li>
</ul>

Затем добавьте функцию в свой контроллер:

  $scope.activateTab = function(selectedTab) {
    $scope.activeTab = selectedTab;
  }