CODEWITHSUNDEEP
javascriptcssangularjs
Jean
Jean

Reputation: 429

apply css based on condition angularjs

I'm alternating between two windows in angularjs using ng-click and ng-show :

<div ng-init="showTab2 = false">
            <a ng-click="showTab2 = true; showTab1 = false ">#Tab1 </a>
        </div>
 <div ng-init="showTab2 = true">
            <a ng-click="showTab1 = true; showTab2 = false">#Tab2</a>
        </div>

then with ng-show they appear

Could you please tell me how I can change the color of the tab selected ?

Thank you

Upvotes: 0

Views: 342

Answers (2)

User2
User2

Reputation: 1293

Please check working example here: Example

JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.showTab = 1; //If you want to select default tab
});

HTML

<div>
    <a ng-click="showTab = 1" ng-class="{'active': showTab == 1}">#Tab1 </a>
</div>
<div>
   <a ng-click="showTab = 2"  ng-class="{'active': showTab == 2}">#Tab2</a>
</div>

<div ng-switch="showTab">
    <span ng-switch-when="1">Tab1</span>
    <span ng-switch-when="2">Tab2</span>
</div>

CSS

.active {
   color: red;
 }

Upvotes: 1

AranS
AranS

Reputation: 1891

I'm not sure how your ng-show fits here but use ng-class to toggle css: 

<a ng-class = "{'some-class': showTab1}" 
  ng-click="showTab1 = true; showTab2 = false">#Tab1</a>

Upvotes: 1

Related Questions