Question

有没有办法在ng-grid分组列中显示图标而不是文本？

更新2015年4月14日

我做到了！在Plunker做了一个例子，但我能做我想做的事。谢谢大家。

$scope.gridOptions = {
    ...
    aggregateTemplate: aggregateRowTemplate()
};


function aggregateRowTemplate() {
    var result =
        "<div ng-click=\"row.toggleExpand()\" ng-style=\"rowStyle(row)\" class=\"ngAggregate\">" +
        "    <img ng-src='{{row.label}}' lazy-src >" +
        "    <div class=\"{{row.aggClass()}}\"></div>" +
        "</div>"

    return result;
}

Plunker： http://plnkr.co/edit/OxvCVgmJGzgsNL1eOV1d?p=preview

Answer 1

使用columnDefs，如docs中所述，cellTemplate允许您为列单元格中显示的内容提供HTML字符串。

使用bootstrap glyphicons的示例：

$scope.gridOptions = { 
    data: [{name: "line 1", icon: "plus"},
           {name: "line 2", icon: "trash"}
    }],
    columnDefs: [
        {field: 'name', displayName: 'Name'},
        {
            field:'icon',
            displayName:'icon',
            cellTemplate: '<div><i class="ngCellText" ng-class="glyphicon glyphicon-{{ row.getProperty(col.field) }}"></i></div>'
        }
    ]
 };

Angular JS：如何在ng-grid分组列中使用图标？

1 个答案: