how to apply css class condtionally in angularjs

Question

Hello i am newbie to angularjs and have made a very simple demo of some buttons and css classes.now i am having 4 buttons i need to give my "active" css class when one of 4 buttons is selected,my code is as below,i have gone through this link but its for checkbox and i have no idea about implementing this on buttons change css class dynamically

html

<div class="tab-btn">
    <input type="button"   ng-class="{'active': true}" ng-disabled="button.disabled" ng-show="about"   ng-click="show = 1" value="About" />
     <input type="button" ng-show="help"    ng-click="show = 2" value="Help"/>    
    <input type="button" ng-show="Info"    ng-click="show = 3" value="Special" />        
    <input type="button" ng-show="Service" ng-click="show = 4" value="Service" />            
    <div style="clear: both"></div>
</div>

css

.tab-btn > input.active {
    background: #fff none repeat scroll 0 0;
    border-top: 3px solid #babec9;
    color: #aaaeb9;
}

js

 $scope.show = 1;
            $scope.show1 = function(){
//        var myEl = angular.element( document.querySelector( '#divID' ) );
//            myEl.toggleClass('red');     
                $scope.show2 = false;
                 $scope.show3 = false;
                  $scope.show4 = false;




            };
               $scope.show2 = true;
            $scope.show2 = function(){

                $scope.show1 = false;
                 $scope.show3 = false;
                  $scope.show4 = false;
            };
             $scope.show3 = true;
            $scope.show3 = function(){

                $scope.show1 = false;
                 $scope.show2 = false;
                  $scope.show4 = false;
            };
             $scope.show4 = true;
              $scope.show4 = function(){

                $scope.show1 = false;
                 $scope.show2 = false;
                  $scope.show3 = false;
            };

Please create a jsfiddle or plnkr.co so that it is easier to explain your problem and get it answered quickly. — Rahul Soni
– Rahul Soni, Commented Oct 17, 2015 at 7:27

dfsq · Accepted Answer · 2015-10-17 07:55:07Z

1

You can simple use ng-class="{'active': show == 1}" expression in ngShow:

angular.module('demo', []).controller("DemoController", function($scope) {
    $scope.show = 2;
})

.active {color: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<div ng-app="demo" ng-controller="DemoController">
    <div class="tab-btn">
        <input type="button" ng-class="{'active': show == 1}" ng-click="show = 1" value="About" />
        <input type="button" ng-class="{'active': show == 2}" ng-click="show = 2" value="Help" />
        <input type="button" ng-class="{'active': show == 3}" ng-click="show = 3" value="Special" />
        <input type="button" ng-class="{'active': show == 4}" ng-click="show = 4" value="Service" />
        <div style="clear: both"></div>
    </div>
</div>

answered Oct 17, 2015 at 7:55

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

1 Comment

Jigar Makwana Over a year ago

(stackoverflow.com/questions/33182968/…) this is my another question which is having same issue

Sudeep Gusain · Accepted Answer · 2015-10-17 10:29:55Z

1

<div class="tab-btn" ng-init = "show = 1" ng-controller= "SampleController">
 <input type="button" ng-disabled="show == 1" ng-class="{'active': show == 1}"  ng-click="show = 1" value="About" />
 <input type="button" ng-disabled="show == 2" ng-class="{'active': show == 2}" ng-click="show = 2" value="Help"/>    
<input type="button" ng-disabled="show == 3" ng-class="{'active': show == 3}" ng-click="show = 3" value="Special" />        
<input type="button" ng-disabled="show == 4" ng-class="{'active': show == 4}" ng-click="show = 4" value="Service" />                   
<div style="clear: both"></div>

answered Oct 17, 2015 at 10:29

Sudeep Gusain

425 bronze badges

1 Comment

Jigar Makwana Over a year ago

hi sudeep i appriciate your help dear.but i am stuck at one more point can you help me in that? please it took my whole day..(stackoverflow.com/questions/33182968/…)

Collectives™ on Stack Overflow

how to apply css class condtionally in angularjs

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related