CODEWITHSUNDEEP
cssangularjstabsangular-ui-bootstrap
Pujan
Pujan

Reputation: 69

Changing class on active Tab

i have used angular UI tabs and i have buttons that switches to different tabs. I am trying to change the style of a button of that tab whenever that same tab is active. so i used ng-class to change the styles.

i have the function inside scope which returns the active tab

 $scope.getActive = function() {
     return tabSelector.active;
    console.log("active tab = " + tabSelector.active);

 }

this function returns the number 0,1,2 or 3 depending which tab is active

this is are my css classes

.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 tried using ng class in this format but it will not work .

 <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 problem is ghat the ng-class is not picking up the css classes. I even tried getActive!== 0 but that does not work either how do i make it work

Upvotes: 0

Views: 1409

Answers (1)

quirimmo
quirimmo

Reputation: 9988

Even if the given code misses some information, you should be able to achieve what you are looking for just following this code. Define inside your controller an active variable attached to the scope, initialized to the variable of the panel that you want to be the one active by default.

$scope.activeTab = 1; //supposing you want the first one to be enabled

Then in your HTML code of your tabs use the following code: <button type="button" ng-class="{ 'btn-white-hollow-selected' : activeTab === 1, 'btn-white-hollow' : activeTab !== 1 }" ng-click="activeTab = 1"> Ask a Question </button>

This supposing that the button you posted is the one corresponding to the tab.

Upvotes: 2

Related Questions