apply css based on condition angularjs

Question

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

@User2 thank you for the detailed answer, it worked with ng-class but I couldn't use ng-switch because it creates an other $scope — Jean
– Jean, Commented Jun 2, 2016 at 7:30

Hadi · Accepted Answer · 2016-06-01 14:42:03Z

1

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>

edited Jun 1, 2016 at 14:42

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

answered Jun 1, 2016 at 14:15

AranS

1,91113 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jean Over a year ago

it generates an error in the IDE "expression expected"

User2 · Accepted Answer · 2016-06-01 15:18:58Z

1

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;
 }

answered Jun 1, 2016 at 15:18

User2

1,3038 silver badges17 bronze badges

Collectives™ on Stack Overflow

apply css based on condition angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related