AngularJS UI网格动态覆盖行选择颜色

Question

我正在尝试动态选择行时覆盖ui网格的默认颜色，当我选择第一行时，我希望它具有与所选行的其余行不同的颜色

    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

我相信这可能接近你想要的，Mero。

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;
    });
}]);

这是一个工作的Plunker，http://plnkr.co/edit/radkmw2T7wRCuiJ06Cyj?p=preview。