如何有条件地为网格单元格提供样式？

Question

我在AngularJS应用程序中使用了Kendo UI网格，我希望有条件地应用某种背景颜色。以下是我的专栏定义：

columns: [
    { field: "TradeAmount", title: "Trade Amount", width: "120px", filterable: { cell: { showOperators: false } } },
]

因此上面的列绑定到数据源的'TradeAmount'字段。现在我的数据源中有另一个名为“ApprovalStatus”的字段，其值可以是“已批准”或“未批准”。基于此值，我希望更改列中单元格的背景颜色;绿色表示已批准，红色表示未批准。 请有人帮帮我。

@pankajparkar解决方案http://dojo.telerik.com/oREDI的屏幕截图：

Answer 1

您可以在template指令的字段上使用ng-style选项来执行此操作。

columns: [
    { field: "TradeAmount", title: "Trade Amount", 
      width: "120px", filterable: { cell: { showOperators: false } }, 
      template: '<span ng-style="{background: #:ApprovalStatus# == \'Approved\'? \'red\': \'green\'}"></span>'
}]

小Demo here

<强>更新

要在td元素上进行更改，您需要使用指令应用它，目前它已应用于您在模板中指定的范围

.directive('setStyle', function() {
     return function(scope, element, attrs) {
        element.parent().css('backgroundColor', attrs.setStyle)
     }
})

Above指令会在background-color内设置td属性，它是指定模板的父级

<强>模板

template: '<span set-style="#:FirstName == \'Nancy\'? \'red\': \'green\'#">#:FirstName#</span>',

Demo here