AngularJS UI Grid динамически перезаписывает цвет выделения строки

Question

Привет, я пытаюсь перезаписать цвет по умолчанию для пользовательского интерфейса сетки, когда строка выбирается динамически, когда я выбираю первую строку, я хочу, чтобы он имел другой цвет, чем остальные выбранные строки

    if($scope.mySelections.length==1){
     //here overwrite the css
    .ui-grid-row.ui-grid-row-selected>[ui-grid-row]>.ui-grid-cell{
         background-color: #efe8ed!important;
    }
}

Я надеюсь, что это имеет смысл. любые предложения приветствуются. идея состоит в том, чтобы первая выбранная строка выглядела иначе, чем строки, выбранные после нее. заранее спасибо

Answer 1

Я верю, что это может быть близко к тому, что ты хочешь, Меро.

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

app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
  var colorRowTemplate =
    //same as normal template, but extra ng-class for firstSelection:  'first-selection':row.entity.firstSelection
    "<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=\"{'first-selection':row.entity.firstSelection, 'ui-grid-row-header-cell': col.isRowHeader }\" role=\"{{col.isRowHeader ? 'rowheader' : 'gridcell'}}\" ui-grid-cell></div>";
  $scope.gridOnRegisterApi = function(gridApi) {
    gridApi.selection.on.rowSelectionChanged($scope, function(row) {
      row.entity.firstSelection = false;
      if (row.isSelected) row.entity.firstSelection = (gridApi.selection.getSelectedCount() == 1);
    });
  };
  $scope.gridOptions = {
    enableSelectAll: true,
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    enableFullRowSelection: true,
    rowTemplate: colorRowTemplate,
    showGridFooter: true,
    onRegisterApi: $scope.gridOnRegisterApi
  }
  $http.get('data.json')
    .then(function(response) {
      $scope.gridOptions.data = response.data;
    });
}]);

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