Angularjs ng-class 与 ng-grid / 交换 css 样式

Question

我有一个使用 ng-grid 的非常简单的 Angular 应用程序。由于某种原因，我不知道如何根据数据应用样式。我需要能够根据下面的数据状态代码显示不同的状态图像：

控制器：

$scope.myData2 = [
            {service: "aaa", status: "ok"},
            {service: "ccc", status: "warning"}];
$scope.gridOptions2 = {
            data: 'myData2',
            headerRowHeight:0,
            rowHeight: 39,
            enableRowSelection: false,
            enableHighlighting:true,
            columnDefs: [
                {field: 'service', enableCellEdit: true},
                {field:'status', cellTemplate : 'stateTemplate.html'}]
        };

指令：

angular.module('myApp')
    .directive("statusIcon", function() {
        return {
            restrict: 'E',
            template: "<div ng-class=status-{{row.getProperty('status')}}></div>"
        };
    });

模板：

<status-icon></status-icon>

css:

.status-ok{
    width: 24px;
    height: 24px;
    background: url("../images/status_ok.png") no-repeat;

}

.status-warning{
    width: 24px;
    height: 24px;
    background: url("../images/status_ok.png") no-repeat;

}

当我渲染页面时，这是输出：

<status-icon class="ng-scope"><div ng-class="status-ok"></div></status-icon>

我错过了经典的class="status-ok"

我做错了什么？

PLUNKRhttp://plnkr.co/edit/4xTC4pKIR0AnzD89iIp2?p=preview

Answer 1

看看单元格模板article here。

columnDefs: [{ field: 'firstName', displayName: 'First Name', width: 90, cellTemplate: '<div>{{row.entity[col.field]}}</div>' },
                     { field: 'lastName', displayName: 'Last Name', width: 80 },
                     { field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader' } ]

你可以定义cellClass或headerClass或完全不同的cellTemplate

编辑

以下是如何将 ng-class 与单元格模板一起使用的示例

<div ng-class="row.entity[col.field] == 'success' ? 'successClass' : 'errorClass'">{{row.entity[col.field]}}</div>

编辑

工作plunker

你不需要 ng-class 你只需要类