jqueryangularjsng-grid

How can I change background row color based on cell using ng-grid


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


Solution

  • 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