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.
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top