AngularJS Tutorial - Toggle CSS class with condition

The following code shows how to toggle CSS class with condition.

Example


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
<style>
.myclass{<!--from  w  ww  .j  ava2  s . c  o m-->
    border:dotted pink 3px;   
}
</style>
</head>
<body>
  <div ng-app>
    <span id='1' 
          ng-class='{"myclass":tog==1}' 
          ng-click='tog=1'>Click to change style for span 1</span>
    <br/>
    <span id='2' 
          ng-class='{"myclass":tog==2}' 
          ng-click='tog=2'>Click to change style for span 2</span>
</div>
</body>
</html>

The code above is rendered as follows: