使用选择模块更改特定行的颜色

Question

当属性具有特定值时，我想为该行着色。这个问题之前已经被问过并且在这里有一个有效的解决方案： How to color row on specific value in angular-ui-grid?

我正在设置正面颜色（颜色：#FF0000），而不是背景颜色。

在您添加选择模块之前，这一切正常。使用此模块，您在此行的开头有一个额外的复选框。当你检查这个时，行的背景颜色会改变（不是前面的颜色！）。所有这一切都添加了一个额外的 class，它在网格的 css:

中声明

.ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell {
  background-color: #c9dde1;
}

选中复选框后，此 class 将添加到元素中。

我的代码与链接答案中的代码相似：

rowTemplate: '<div ng-class="{\'targetRow\': row.entity.target }"><div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div></div>',

.targetRow {
    color: #FF0000;
}

添加此项后，选中一行时背景颜色不再改变。在 Chrome 的调试工具中，我可以看到 class 仍然被正确添加并且没有其他差异，仍然 color 以某种方式覆盖 background-color

为什么会发生这种情况，我该如何解决？

这是一个笨蛋： http://plnkr.co/edit/U1rmT48kSjK5gVH0Fv43?p=preview

删除 rowTemplate 以查看差异。

Answer 1

在我将行模板更新为

后，我认为问题出在模板上

var rowtpl = '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader, \'green\':true, \'blue\':row.entity.count==1 }" ui-grid-cell></div>';

网格开始工作

http://plnkr.co/edit/4XVh31i48Y5iKZbaFevE?p=preview

使用选择模块更改特定行的颜色

Change color of certain row with the selection module

html

javascript

css

angularjs

angular-ui-grid