如何在angularjs中有条件地应用css类

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

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

Answer 2

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