Question

尝试在UI网格单元模板中使用COL_FIELD值时遇到一些困难。

基本上我想做的是根据'dateColor'字典中的值为每个单元格设置颜色。

代码如下：

function getMyServersTableFields(fieldsToShow,dateColor) {

            var specificColumnDef = [];

            _.each(fieldsToShow, function (item) {

                    specificColumnDef.push(
                        {
                            name: 'item',
                            displayName:'item',
                            cellClass: 'ui-grid-cell-contents',
                            cellTooltip: true,
                            cellTemplate: '<div><strong style="color: ' + dateColor[ {{COL_FIELD}} ] + '"">{{COL_FIELD}}</strong></div>',
                            minWidth: 150,
                            aggregationType: function (items) {
                                return 'Total servers: ' + $filter('number')(items.length);
                            }
                        }
                    );
            }   

    }

您可以看到'dateColor'是一本字典，而我尝试设置颜色的方式是通过获取该字典中{{COL_FIELD}}的值，但是我无法使其正常工作。有什么建议么？

Answer 1

您的cellTemplate定义错误。 COL_FIELD必须在字符串定义内，字符串之外的COL_FIELD不存在。

您可以这样做：

function getMyServersTableFields(fieldsToShow, dateColor) {
var specificColumnDef = [];
_.each(fieldsToShow, function (item) {
    specificColumnDef.push({
        name: 'item',
        displayName: 'item',
        cellClass: 'ui-grid-cell-contents',
        cellTooltip: true,
        //cellTemplate: '<div><strong style="color: ' + dateColor[ {{COL_FIELD}} ] + '"">{{COL_FIELD}}</strong></div>',
        cellTemplate: '<div><strong ng-style="{\'color\': col.colDef.dateColor[COL_FIELD]}">{{COL_FIELD}}</strong></div>',
        dateColor: dateColor,
        minWidth: 150,
        aggregationType: function (items) {
            return 'Total servers: ' + $filter('number')(items.length);
        }
        })
    })
}

我也将样式更改为ng-style，因为您正在使用插值来设置样式。

在UI网格cellTemplate中使用{{COL_FIELD}}

1 个答案: