Change td style based on value in angular - css

Question

I have a column where the style of each td needs to be changed based on value. There are five status's, so there has to be five different border-colors and font-colors. How do I do this in angular script without hard-coding (new to angular)?
What I am doing is:
In html:
<table st-table = "tenants" class="table table-striped table-bordered">
<tbody>
<tr dir-paginate="t in tenants | orderBy:sortColumn:reverseSort | filter:searchText | itemsPerPage:itemsPerPage" current-page="currentPage" >
<td ng-if="t.status.color==2"><b class = 'td_status'>{{t.status.id}}<b></td>
In css:
.td_status {
border-radius: 20px;
width: auto;
height: auto;
min-width: 100px;
display: inline-block;
text-align: center;
border: 1px solid red;
padding: 5px;
}
In js:
datax.forEach(function(obj,i){
if (obj.last_paid) {
if (obj.stripe_status == "active") {
obj.status = {
'id' : "Paid: Last Paid " + $filter('date')(obj.last_paid, 'MM-dd-yyyy'),
'value': "Paid: Last Paid " + $filter('date')(obj.last_paid, 'yyyy-MM-dd HH:mm:ss Z'),
'color' : 0
}
}
else if (obj.stripe_status == "past_due" || obj.stripe_status == "unpaid") {
obj.status = {
'id' : "Past Due: Last Paid " + $filter('date')(obj.last_paid, 'MM-dd-yyyy'),
'value': "Past Due: Last Paid " + $filter('date')(obj.last_paid, 'yyyy-MM-dd HH:mm:ss Z'),
'color' : 4,
}
}....

Answer 1

I made an example since it is a little slow at work.
Here you can see my use of ng-class. I give it a function and pass the status which is defined in $scope.data item.status comes from my ng-repeat
<div ng-app="TestApp" ng-controller="TestController">
<p ng-repeat="item in data" ng-class="getBorderColor(item.status)">
{{item.name}}
</p>
</div>
Below I have my controller and some sample data. The getBorderColor runs through its conditions and returns className based off of status.
var app = angular.module('TestApp', []);
app.controller('TestController', function($scope) {
$scope.data = [
{
name:'Ronnie',
status:1
},
{
name:'Chance',
status:2
},
{
name:'Mike',
status:1
},
{
name:'Mark',
status:3
}];
$scope.getBorderColor = function(status) {
var className = '';
if (status == 1) {
className = 'status1';
} else if (status == 2) {
className = 'status2';
} else if (status == 3) {
className = 'status3';
}
return className;
};
});
And my simple css is:
.status1 {
border:1px solid red;
}
.status2 {
border:1px solid blue;
}
.status3 {
border:1px solid green;
}
https://jsfiddle.net/ojzdxpt1/7/