Im using angular to show a table. I have an ng-grid with 8 cols. There are any way to change the color of the rows based on the col 7 value? (called "diferencia_Dias" ) For example: if diferencia_Dias have the value 1, the color of the row should be red and if the value is higher to 5 the color should be green color.
ng-grid:
<div class="table-responsive">
<div class="gridStyle" ng-grid="gridPedidosProx"></div>
</div>
and this is my controller
function DeveloperMainCtrl($scope, $http, $q) {
$scope.dataPedidosProx = [];
$scope.gridPedidosProx = {
columnDefs: [
{ displayName: 'Cliente', field: 'cliente', width: "160" },
{ displayName: 'Num. Pedido', field: 'numero_pedido', width: "110" },
{ displayName: 'Hrs. Invertidas', field: 'hrs_Invertidas', width: "110" },
{ displayName: 'Hrs. Estimadas', field: 'hrs_Estimadas', width: "110" },
{ displayName: 'Hrs. Restantes', field: 'hrs_Restantes', width: "110" },
{ displayName: 'Entrega de Pedido', field: 'entrega_Pedido', width: "150" },
{ displayName: 'Dif. en Dias', field: 'diferencia_dias', width: "100" },
{ displayName: 'Fecha Prometida', field: 'fecha_estimada_entrega', width: "*" }
],
data: 'dataPedidosProx',
multiSelect: false,
};
// * * * Obtiene Listado de Pedidos del Usuario * * *
$scope.getProxPedidosUsr = function(id_usuario) {
$http.post('../ws/wsReact.asmx/getProxPedidos', {'id_usuario': id_usuario}, {
headers: { 'Content-Type': 'application/json; charset=utf-8', 'Accept': 'application/json,text/javascript, /;' }
})
.success(function(data, status) {
if (data.d != 'e') {
$scope.dataPedidosProx = eval(data.d);
}
else {
alert("No existen pedidos asociados a su cuenta");
console.log("You don't have Jale :S ¡WTF!");
}
})
.error(function(data, status) {
$scope.data = data || "Request failed";
alert(data.Message);
});
}
I make an example similar to this, but only with to cols, they can check it here:
Plunker: change row color example
Im open to other solutions, jQuery,JavaScript or AngularJs.
Thanks in advance
You need to add the colors in your stylesheet, and use a rowTemplate in conjunction with ng-class like this:
ng-class="{red: row.getProperty(\'diferencia_dias\') <= 1, green: row.getProperty(\'diferencia_dias\') > 5}"
See updated Plunker here