In my angular application, I have a popup window containing several tabs. These tabs are styled like Bootstrap and need to be switched using Angular. The code for the tabs is as follows (simplified):
<div class="settingsPopupWindow">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="{{getStyle(0)}}" ng-click="showTab(0)">
<a href="">
First tab navigation
</a>
</li>
<li class="{{getStyle(1)}}" ng-click="showTab(1)">
<a href="">
Second tab navigation
</a>
</li>
</ul>
<!-- Tab content-->
<div class="tab-content">
<div class="tab-pane {{getStyle(0)}}">
First tab content
</div>
<div class="tab-pane {{getStyle(1)}}">
Second tab content
</div>
</div>
</div>
The controller code for switching tabs looks like this:
.......
$scope.active = 0;
$scope.showTab = function (tabNumber) {
$scope.active = tabNumber;
};
$scope.getStyle = function(n) {
if (n === $scope.active) {
return 'active';
}
else {
return '';
}
}
.......
Both navigation elements and tab blocks should have an active class when selected.
Initially, everything works correctly: the first tab is active with the First tab navigation highlighted and its content displayed. However, clicking on the Second tab navigation only activates the navigation element without displaying the corresponding content.
Even though the second tab's navigation appears active, the content of the first tab remains visible in the panel. This results in needing to click twice on the Second tab navigation to switch to the second tab successfully.
If I first select the Second tab navigation and then the First tab navigation, the First tab navigation becomes active but shows the content of the second tab in the panel. It seems like there is a delay between switching the navigation elements and tab panels, despite both being controlled by the same function.
I would appreciate some assistance in resolving this issue. Thank you.
Update
I attempted to use ng-class instead of class, but it did not solve the problem. There still exists a one-click delay between switching the navigation elements and tab panels. While the showTab() function operates correctly in updating the active tab number, the styles of the tabs do not update immediately after changing the active tab. This inconsistency persists whether using class or ng-class.