ngClass

by Rob Rothe

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<div ng-app="app" class="container">
  <div ng-controller="Controller">
   <table>
   <tr ng-repeat="component in components">
  <td >{{component.type}}</td>
  <td>{{component.component}}</td>
  <td>{{component.created}}</td>
  <td ng-class="{'text-success':component.status == 'Live'}">{{component.status}}</td>
  <td ng-class="{'text-warning':component.status == 'Warning'}">{{component.status}}</td>
  <td ng-class="{'text-danger':component.status == 'Down'}">{{component.status}}</td>
  </tr>
   </table>
  </div>
</div>

CSS

body {
  padding-top: 20px;
}

JavaScript

angular
  .module('app', [])
  .controller('Controller', Controller);

function Controller($scope) {
	$scope.components = 
    [
    {type: "Dispacther",        component: "Dispatcher2",  created: "2016-05-20T01:44:56.113", status: "Live"},
    {type: "Mobilizer",         component: "Mobility3",    created: "2016-05-25T07:34:30.019", status: "Down"},
    {type: "Listener",          component: "ADT 22146",    created: "2016-05-20T01:44:56.113", status: "Live"},
    {type: "OutBound Charge",   component: "Billing 92",   created: "2016-05-20T01:44:56.113", status: "Live"},
    {type: "Listener",          component: "22064",        created: "2016-05-20T01:44:56.113", status: "Live"},
    {type: "Dispacther",        component: "Dispacther1",  created: "2016-05-21T00:48:50.433", status: "Warning"}
];
}