JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app>
<h2>Demo of ng-class with an object as value</h2>
<table ng-controller="DemoCtrl">
<tr ng-class="{'red': project.total <35 , 'yellow':project.total >= 35 && project.total<70,'green': project.total >= 70 } ">
<td>Your score is {{project.total}}</td>
</tr>
</table>
</div>
CSS
.red {
color: red;
}
.yellow {
color: yellow;
}
.green {
color: green;
}
JavaScript
function DemoCtrl($scope) {
$scope.project = {
total: 25
};
}