代码之家  ›  专栏  ›  技术社区  ›  Mauricio Cárdenas

无法自动从ng类添加/删除类以切换所选选项卡

  •  0
  • Mauricio Cárdenas  · 技术社区  · 7 年前

    我就是这么做的:

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

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

    我尝试在没有函数的情况下进行比较,只是通过执行ng class=“{mainTabs-active”:active==n}直接比较值,但也不起作用。

    我已经尝试过寻找类似的变量名和CSS,可能会影响这一点,但找不到东西。这很简单,但我已经坚持了一段时间了,似乎还没有找到解决办法。

    1 回复  |  直到 7 年前
        1
  •  1
  •   thul    7 年前

    在输入日志后,我可以告诉你,每次点击都会调用所有选项卡上的所有函数,所有函数都传递false。更容易从ng类中删除函数并将其移动到ng类,如下所示:

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