Angular UI 网格:条件行格式未覆盖默认交替颜色
Angular UI Grid: Conditional Row Format Not Overriding Default Alternating Colours
对于我的 UI-Grid,我在 $scope.gridOptions 对象中使用以下行模板创建了条件格式:
rowTemplate: '<div ng-class="{\'recruiter-row-active\':row.entity.activePositions!=0, ' +
'\'recruiter-row-passive\':(row.entity.activePositions==0 && row.entity.passivePositions !=0),' +
'\'recruiter-row-free\':(row.entity.activePositions==0 && row.entity.passivePositions==0)}">' +
'<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 }" ui-grid-cell></div></div>'
classes 看起来像这样:
.ui-grid-row .recruiter-row-active {
background-color: #ff816b !important;
}
.ui-grid-row .recruiter-row-passive {
background-color: #fcff9d !important;
}
.ui-grid-row .recruiter-row-free {
background-color: #70cc79 !important;
}
有问题的 html 行的 class 是 "ui-grid-row" 和 "ng-scope" 并且父元素有 class "ui-grid-canvas"
当我还实现了
时,我的条件格式也能正常工作
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
}
但是我不想影响我的网络应用程序中的其他网格。
如何让我的条件行格式覆盖默认值?
您可以使用 scss 并用一个包裹您的网格:
<div view="my-colors">
<!-- your grid element goes here -->
</div>
在 scss 文件中,将您只想影响该视图的样式包装为:
[view="my-colors"] {
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
}
}
对于我的 UI-Grid,我在 $scope.gridOptions 对象中使用以下行模板创建了条件格式:
rowTemplate: '<div ng-class="{\'recruiter-row-active\':row.entity.activePositions!=0, ' +
'\'recruiter-row-passive\':(row.entity.activePositions==0 && row.entity.passivePositions !=0),' +
'\'recruiter-row-free\':(row.entity.activePositions==0 && row.entity.passivePositions==0)}">' +
'<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 }" ui-grid-cell></div></div>'
classes 看起来像这样:
.ui-grid-row .recruiter-row-active {
background-color: #ff816b !important;
}
.ui-grid-row .recruiter-row-passive {
background-color: #fcff9d !important;
}
.ui-grid-row .recruiter-row-free {
background-color: #70cc79 !important;
}
有问题的 html 行的 class 是 "ui-grid-row" 和 "ng-scope" 并且父元素有 class "ui-grid-canvas"
当我还实现了
时,我的条件格式也能正常工作.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
}
但是我不想影响我的网络应用程序中的其他网格。
如何让我的条件行格式覆盖默认值?
您可以使用 scss 并用一个包裹您的网格:
<div view="my-colors">
<!-- your grid element goes here -->
</div>
在 scss 文件中,将您只想影响该视图的样式包装为:
[view="my-colors"] {
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
}
}