Kendo UI 网格和 ng 样式

Question

我在 angular 中有一个 Kendo UI 网格，它正在从我的数据源读取一系列属性。其中之一包含颜色字符串。我想使用所述颜色字符串为网格中的方框设置背景颜色。

我正在为框使用以下模板：

template: "<img class='alarm-box-prediction variable' ng-style={'background-color': dataItem.type}'></img>"

我的dataSource的相关数据如下：

dataSource: {
        dataSource: function(data) {
            // Map the stored properties in the data array of objects received to 
            // their corresponding columns in the Grid
            return $.map(data, function(alarmProperty) {
                return {
                    // Change array index to match API once we are getting data from there
                    type: alarmProperty[0],
                    //... there are more properties here but i removed them as they are not the focus
                };
            });
        },

来自 JSON 文件的相关数据是：

{
    "alarms": [
        {
            "type": "Yellow",
//...
        }
//...
]}

Answer 1

发现问题。 ng-style 需要不同的格式，因为它作为字符串传递给 kendo.

template: "<img class='alarm-box-prediction variable' ng-style=\"{'background-color':dataItem.type}\"></img>",

Kendo UI 网格和 ng 样式

Kendo UI Grid and ng-style

javascript

kendo-ui

angularjs

kendo-grid

ng-style