I have implemented Angular UI tabs with buttons that switch to different tabs. I am attempting to change the style of a button when its corresponding tab is active by using ng-class to dynamically apply styles.
Inside my scope, I have a function that returns the active tab:
$scope.getActive = function() {
return tabSelector.active;
console.log("active tab = " + tabSelector.active);
}
This function returns a number (0, 1, 2 or 3) depending on which tab is currently active.
Below are my CSS classes for the buttons:
.btn-white-hollow {
padding: 20px 20px 20px 20px;
margin-top: 16px;
background-color: #fff;
color: #0A135E;
font-weight: bolder;
-webkit-transition: all linear .2s;
transition: all linear .2s;
}
.btn-white-hollow-selected {
padding: 20px 20px 20px 20px;
margin-top: 16px;
background-color: #fff;
color: #fd7400;
border-bottom: 2px solid #fd7400;
background: #fff;
}
I attempted to use ng-class in the following format, but it did not work as expected:
<li class="seekerhead" >
<button type="button" ng-class="{ 'btn-white-hollow-selected' : getActive() == '0', 'btn-white-hollow' : getActive() !== '0' }">Ask a Question</button>
</li>
The issue is that ng-class is not applying the correct CSS classes. I also tried using getActive() !== 0, but that approach didn't work either. How can I resolve this and make it functional?