Question

所以我有一些JavaScript如下：

$scope.gridTasks = {
        data: 'tasks'
        , multiSelect: false
        , sortInfo: { fields: ['DueSoon', 'SeenByOwner'], directions: ['asc'] }
        , columnDefs: [
           { field: 'ID', displayName: 'ID', visible: false }
           , { field: 'SeenByOwner', displayName: '', width: '17', cellTemplate: '<p><i tooltip-placement="top" tooltip-append-to-body="true" tooltip="You haven\'t looked at this yet." class="{{row.entity.DueSoon ? \'glyphicon glyphicon-fire\' : (!row.entity.SeenByOwner ? \'glyphicon glyphicon-info-sign\' : \'\')}}" style="color: {{row.entity.DueSoon ? \'red\' : \'orange\'}};font-size:15px; padding-top:5px"></i></p>' }
           , { field: 'Priority.Name', displayName: 'Priority' }
           , { field: 'Description', displayName: 'Description' }
           , { field: 'CreatedOn', displayName: 'Created', cellFilter: 'date:\'MM/dd/yyyy\'', visible: $scope.completed }
           , { field: 'Completed', displayName: 'Closed', cellFilter: 'date:\'MM/dd/yyyy\'', visible: !$scope.completed && $scope.completed != undefined }
           , {
               cellTemplate: '<div>' +
                      '<button type="button" class="btn btn-primary btn-xs" style="margin-top: 4px" ng-click="editTask(row.entity)">Open</button></div>'
               , width: '9%'
           }
        ]
    };

首先，在＆＃34; SeenByOwner＆＃34;的列中，我试图检查DueSoon是否设置为true。如果是这样，我想用火图标显示红色的glyphicon。如果没有，我想检查SeenByOwner是否属实。如果是，我想以橙色显示不同的glyphicon。

截至目前，我可以正确显示不同的glyphicons，如果两个布尔值都设置为false，则不会显示。到目前为止很棒！

问题是它们以黑色显示，我无法弄清楚如何让它们以适当的颜色显示，而不会完全推断复制风格=＆＃34;＆＃34;属性为in-line if的每个部分。

另一个问题是ng-grid没有基于SortInfo正确排序。如果我在字段中唯一的字段是SeenByOwner，那么它可以通过SeenByOwner进行排序，但是当我添加DueSoon时，它会变得很糟糕。

我试图在小提琴中做这件事（对不起，我是网络开发的新手），但我不知道如何让它导入我们使用的所有库发展。

Answer 1

如果你想坚持使用内联样式而不是使用css类，你需要ng-style

ng-style="{color: row.entity.DueSoon ? 'red' : 'orange'}

Answer 2

你可以使用ng-class。

<div ng-class="{ 'myCssClass': SeenByOwner }"></div>

基本上，如果您的属性SeenByOwner为真，上面会将.myCssClass附加到您的div。

ng-grid中的颜色图标基于布尔值

2 个答案: