I've customized a table by changing the row color based on a property value, and I'm using ng-repeat to display the rows. Here's my table:
<table class="tab table span6 tabhover" style="margin:0;" >
<thead>
<th>No. Parte</th>
<th>Cantidad</th>
<th>Descripcion</th>
<th>Estatus</th>
<th>Fecha estatus</th>
</thead>
<tbody ng-repeat="r in reqs">
<tr ng-class="{selected: r.idrdm_detalles == idSelectedVote}" ng-click='detallesHistory(r.idrdm_detalles)' bgcolor="{{r.color}}">
<td>{{r.numeroparte}}</td>
<td>{{r.cantidad}}</td>
<td>{{r.descripcion}}</td>
<td>{{r.estatus}}</td>
<td>{{r.fecha_estatus}}</td>
</tr>
</tbody>
</table>
The background color of each row is determined by the "color" property of the object.
For setting the row color, I've implemented this function:
this.color = function(codigo){
if(codigo == 10){
return '#00A6E8';
}
else if(codigo == 60 || codigo == 80){
return '#51BD53';
}
else if(codigo == 90 || codigo == 99){
return '#DE5F5F';
}
else{
return '#F5AB2C';
};
};
In my controller, I use Angular forEach to add the color property to each data array entry:
angular.forEach(data, function(value, key){
var c = value.codigo;
value.color = self.color(c);
$scope.idrdm = req;
//console.log(value);
});
$scope.reqs = data;
The row background colors are displayed correctly in browsers like Chrome, Firefox, and Safari. However, in Internet Explorer, the color appears as "#00c00" instead of the expected color. If anyone has insight on how to address this issue, please let me know. PS. I tried using ng-style like this:
<tr ng-style="'{background-color':{{r.color}}">
This method worked for other browsers but not in Internet Explorer.