AngularJS UI 그리드를 동적으로 행 선택 색을 덮어 씁니다.

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

나는 이것이 당신이 원하는 것, Mero에 가까울 것이라고 믿습니다.

자바 스크립트/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입니다.