AngularJS Live Example

by Korah Babu Varghese

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc5.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <div ng-app>
        <table class="table table-bordered">
            <tbody ng-controller='myfunc'>
                <tr ng-class='checkStatus(good) || checkStatus(average) || checkStatus(bad)'>
                    <td>{{checkStatus.key}}</td>
                </tr>
              

            </tbody>
        </table>
    </div>

CSS

.good
{
  background:green;
  color:#fff;
}
.average
{
  background:yellow;
  color:black;
}
.bad
{
  background:red;
  color:#333;
}

JavaScript

function myfunc($scope) {

            $scope.status = { mainstatus: ['good', 'average', 'bad'] }
          
            $scope.checkStatus = function (keyValue) {
             var key='good';
            if(key==keyValue)
            {
            return key;
            }
              
        }