A demo of using ternary operator or "if…else"

HTML / AngularJS Code

Output

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
.redclass {
    color:#B30000;
    background-color:#FFD2D2;
    border: 2px solid #FF1A1A;
    font-size:18px;
    width:300px;
    margin-left:22px;
    }
.blueclass {
    color:#005CB9;
    background-color:#D7EBFF;
    border: 2px dashed #2492FF;
    font-size:20px;
    width:300px;
    margin-left:20px;
    }
.greenclass {
    color:#006A35;
    background-color:#9DFFCE;
    border: 2px dotted #09FF84;
    font-size:18px;
    width:250px;
    margin-left:15px;
    }
.yellowclass {
    color:#D9D900;
    background-color:#FFFF84;
    border: 2px solid #757500;
    font-size:20px;
    width:250px;
    margin-left:18px;
    }
</style>
<body ng-app="">
<br />
<div class="col-md-5">
        Enter a Number: <input type="text" ng-model="ngclassNo" />
</div>        
<br /><br />
<div ng-class="ngclassNo <= 10 ? 'greenclass' : ngclassNo <= 20 ? 'redclass well' : (ngclassNo > 20 ? 'blueclass well' : 'yellowclass')">
   A demo of ng-class with ternary operators (if..elseif..else)
</div>

</body>
</html>

Enter a Number:

A demo of ng-class with ternary operators (if..elseif..else)