javascript - 无法自动从 ng-class 添加/删除类以切换选定的选项卡
问题描述
我正在尝试在选项卡之间切换,但 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 但找不到任何东西。这很简单,但我已经坚持了一段时间了,似乎还没有接近解决方案。
解决方案
您的 ng-click 函数未正确更新范围。Console.log 是你的朋友(而且永远!)
输入日志后,我可以看出每次单击都会调用所有选项卡上的所有函数,并且所有函数都传递错误。更容易从 ng-class 中删除该函数并将其移动到 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;
}
推荐阅读
- php - 尝试对包含多个字符串的列进行排序(我的雇主有一些限制)
- java - FTPS协议版本
- linux - 如何将特定列转换为标题大小写
- swift - 如何使用滑动手势在 swift UI 中创建退格功能(与原始 IOS 计算器相同)
- python - 动态显示动画图上的最后一个数据值
- python - 如何在一列熊猫数据框中编码json?
- java - 如何使用java在android studio中创建这种类型的对话框?
- python - 如何在 Microsoft Power Bi 中使用 Python Visuals 查找平均值?
- django - Django REST 框架最佳实践
- javascript - 节点模块@kenjiuno/msgreader 错误的原因:MsgReader 不是构造函数