Question

我使用角度来显示一张桌子。我有一个8格的ng网格。有什么方法可以根据col 7值更改行的颜色？（称为＆＃34; diferencia_Dias＆＃34;）例如：如果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);
    });
}

我举了一个类似的例子，但只有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基于单元格更改背景行颜色

1 个答案: