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

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%'
           }
        ]
    };

首先，在 "SeenByOwner" 的列中，我试图检查 DueSoon 是否设置为 true。如果是这样，我想用火图标显示红色的字形。如果不是，我想检查 SeenByOwner 是否为真。如果是，我想用橙色显示不同的字形。

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

问题是它们以黑色显示，如果不将重复的 style="" 属性完全推入内联 if 的每个部分，我无法弄清楚如何让它们以适当的颜色显示。

另一个问题是 ng-grid 没有根据 SortInfo 正确排序。如果我在字段中的唯一字段是 SeenByOwner，则按 SeenByOwner 排序效果很好，但当我添加 DueSoon 时，它变得不稳定。

我正试图在 Fiddle 中实现这一点（抱歉，我是网络开发的新手）但我不确定如何让它导入我们在其中使用的所有库发展。

Answer 1

你可以使用 ng-class.

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

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

Answer 2

如果您想坚持使用内联样式而不是使用 css class

，则需要 ng-style

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

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

Color icon in ng-grid based on booleans

javascript

angularjs

ng-grid