javascript - 在 UI-Grid cellTemplate 中使用 {{COL_FIELD}}

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，因为您使用插值来设置样式。