CODEWITHSUNDEEP
javascripthtmlcssangularjs
Jigar Makwana
Jigar Makwana

Reputation: 227

how to apply css class condtionally in angularjs

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

Upvotes: 1

Views: 121

Answers (2)

Sudeep Gusain
Sudeep Gusain

Reputation: 42

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

Upvotes: 1

dfsq
dfsq

Reputation: 193301

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>

Upvotes: 1

Related Questions