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

【问题标题】：How to conditionally provide a style for a grid cell?如何有条件地为网格单元格提供样式？
【发布时间】：2015-06-08 15:48:02
【问题描述】：

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

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

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

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

【问题讨论】：

标签： angularjs kendo-ui kendo-grid

【解决方案1】：

您可以通过在带有ng-style 指令的字段上使用template 选项来做到这一点。

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

上述指令将在td 中设置background-color 属性，这是指定模板的父级

模板

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

Demo here

【讨论】：

那没用...顺便说一句，值比较在哪里？
在 ng-style 中我使用了 #:ApprovalStatus# 这将决定背景颜色的值
如果我想要另一个 ApprovalStatus 值为 'Pending' 怎么办？而且我仍然无法让您的解决方案发挥作用
您需要确保 ApprovalStatus 在单元格模板执行的上下文中。您可以像这样添加日志记录：#console.log(ApprovalStatus)# 并查看它是否存在。出于我的目的，我设法使用 data[field-name] 访问网格中的其他字段（您可以使用与上面类似的 console.log 调用查看“数据”包含的内容）。
是的，ApprovalStatus 是在单元格模板执行的上下文中。日志正在将 ApprovalStatus 值打印到控制台。