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

所以我有一些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。如果是这样，我想用火图标显示红色的glyphicon。如果不是，我想检查SeenByOwner是否为true。如果是的话，我想以橙色显示另一个glyphicon。

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

问题是它们以黑色显示，我无法弄清楚如何在不将重复的style =“”属性完全插入到if的每个部分的情况下以适当的颜色显示它们。

另一个问题是ng-grid无法基于SortInfo正确排序。如果我在字段中唯一的字段是SeenByOwner，则按SeenByOwner排序的效果很好，但是当我添加DueSoon时，它会变得很奇怪。

我正在尝试使这成为Fiddle的事情（对不起，我是Web开发的新手），但是我不确定如何将其导入我们在开发中使用的所有库。