如何使用 ng-grid 根据单元格更改背景行颜色

Question

我正在使用 angular 显示 table。我有一个带有 8 列的 ng-grid。有什么方法可以根据 col 7 值更改行的颜色？（称为 "diferencia_Dias" ）例如：如果 diferencia_Dias 的值为 1，则行的颜色应为红色，如果值高于 5，则颜色应为绿色。

ng-网格：

<div class="table-responsive">
    <div class="gridStyle" ng-grid="gridPedidosProx"></div>
</div>

这是我的控制器

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);
    });
}

我做了一个类似的例子，但是只有to cols，他们可以在这里查看：
Plunker: change row color example
我对其他解决方案持开放态度，jQuery、JavaScript 或 AngularJs。提前致谢

Answer 1

您需要在样式表中添加颜色，并像这样将 rowTemplate 与 ng-class 结合使用：

ng-class="{red: row.getProperty(\'diferencia_dias\') <= 1, green: row.getProperty(\'diferencia_dias\') > 5}"

查看更新Plunker here

如何使用 ng-grid 根据单元格更改背景行颜色

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

jquery

angularjs

ng-grid