Question

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

控制器：

$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"

我做错了什么？

PLUNKR http://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，你只需要上课

具有ng-grid /交换css样式的Angularjs ng-class

1 个答案: