Угловая UI-Grid условная раскраска выбора

Question

Я хочу применить условное окрашивание на основе данных в моей сетке. Я использую функцию cellClass в columnDefs для этого. Моя проблема в том, что эти классы не обновляются при изменении выделения, и я не могу определить цвета для строк, которые выделены, а также имеют условную окраску. Так, например, некоторые строки окрашиваются в красный цвет в зависимости от данных, и когда они выделены, их цвет должен быть более темным красным, чтобы показать выбор и условие.

Есть ли способ добиться этого?

Это то, что я пытаюсь сделать, но, очевидно, это не сработает, так как эта функция не вызывается при изменении выбора:

    vm.getCellHighlight = function(grid, row, col, rowRenderIndex, colRenderIndex) {
        var rowStatus = row.entity.isChild ? grid.parentRow.entity.transactionItemStatus : row.entity.transactionItemStatus;
        var rowSelected = row.isSelected ? 'Selected' : '';
        var rowType = '';
        if (rowStatus == ticketStateStorno){
            rowType = 'Storno';
        }
        if (rowStatus == ticketStateUsed){
            rowType = 'Used';
        }
        return (rowRenderIndex % 2)? 'searchSalesGridHighlight' + rowType + 'Dark' + rowSelected : 'searchSalesGridHighlight' + rowType + 'Light' + rowSelected;
    };

Answer 1

Я считаю, что это может быть близко к тому, что вы хотите, побито.

Контроллер JavaScript/AngularJS:

app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
  var colorRowTemplate =
    //same as normal template, but extra ng-class for old people:  'old-people':(row.entity.Age>25&&!row.isSelected), 'old-people-selected':(row.entity.Age>25&&row.isSelected)
    "<div ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.uid\" ui-grid-one-bind-id-grid=\"rowRenderIndex + '-' + col.uid + '-cell'\" class=\"ui-grid-cell\" ng-class=\"{'old-people':(row.entity.Age>25&&!row.isSelected), 'old-people-selected':(row.entity.Age>25&&row.isSelected), 'ui-grid-row-header-cell': col.isRowHeader }\" role=\"{{col.isRowHeader ? 'rowheader' : 'gridcell'}}\" ui-grid-cell></div>";
  $scope.gridOptions = {
    enableSelectAll: true,
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    enableFullRowSelection: true,
    rowTemplate: colorRowTemplate,
    showGridFooter: true
  }
  $http.get('data.json')
    .then(function(response) {
      $scope.gridOptions.data = response.data;
    });
}]);

Вот рабочий Плункер, http://plnkr.co/edit/Yt7jQf6044YKzyG2CJtg?p=preview.