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>{{status.mainstatus[0]}}</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;
      }

    }