I need to dynamically change the style of each td in a column based on its value. There are five different statuses, so each status should have a unique border-color and font-color assigned to it. How can I achieve this using Angular script without hard-coding (I am new to Angular)?
This is what I have tried:
In my HTML file:
<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 my CSS file:
.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 my JavaScript file:
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,
}
}....