2015-02-26 2 views
0

Im используя угловую для отображения таблицы. У меня есть ng-сетка с 8 столбцами. Есть ли способ изменить цвет строк на основе значения 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); 
    }); 
} 

Я делаю пример, подобный этому, но только на перевалы, они могут проверить его здесь:
Plunker: change row color example
Я открыт для других решений, jQuery, JavaScript или AngularJs. Заранее спасибо

ответ

1

Вам нужно добавить цвета в таблицу стилей, и использовать rowTemplate в сочетании с нг-класса, как это:

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

Смотрите обновленный Plunker here

Смежные вопросы