Cannot add/remove classes from ng-class automatically to switch selected tab

Mauricio

New Member
#1
I'm trying to switch in between tabs, but the CSS is not removing the previously selected tab's "selected" class.
This is how I'm doing it:
Mã:
        <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>
And the isActive function is:
Mã:
$scope.isActive = function(value){
    if($scope.activeTab==value){
        return true;
    }
    else{
        return false;
    }
}
I tried doing it without a function, just comparing values directly by doing ng-class="{'mainTabs-active' : active == n}" and didn't work either.
I already tried looking for similar variable names and CSS that may be affecting this but couldn't find a thing. It's pretty simple, but I've been stuck with this for a while now and don't seem to get closer to a solution.
 

Admin

Administrator
Thành viên BQT
#2
Your ng-click functions aren't updating the scope properly. Console.log is your friend here (and always!)
After putting in the logs I could tell that all your functions on all tabs were being called each click, and all were passing false. Easier to remove the function from the ng-class and move it to the ng-click like so:
Mã:
<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>
Then add the function to your controller:
Mã:
  $scope.activateTab = function(selectedTab) {
    $scope.activeTab = selectedTab;
  }
 
OP
OP
M

Mauricio

New Member
#3
Thank you so much for your help, however, I was able to fix it just by changing the ng-if to ng-show. Now it's working as smooth as butter. I will try it that way tho, I'd rather have the element existing or not than just showing itself.
 

Admin

Administrator
Thành viên BQT
#4
No problem, glad you got it working! I would try it out so you don't have as many function calls but up to you
 
OP
OP
M

Mauricio

New Member
#5
I already changed it so it's just the way you suggested and it works perfectly fine! Thanks man.
 
Top