Question

我的目标是在ui-grid单元格中实现动态CSS类，最简单的例子是为性别列着色或根据单元格的值显示图标。 CSS类将根据页面上的当前数据进行更新，例如，如果。单击一个按钮，更新绑定到网格的数据，重新计算类。

动态CSS类的作者和贡献者有很多例子，例如。 http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed但是他们只描述了一种在页面加载期间条件性地应用类的方法，我需要的是一种获取重新应用页面内容规则更改的行为的方法，如上所述基本角度ng-class的工作方式

在ui-grid中，您可以在列定义中使用单元格模板或单元格类机制，但似乎在这里都不起作用：

 cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
    if (grid.getCellValue(row ,col).toLowerCase() === 'male') {
      return 'blue';
    }
  }

cellTemplate: 
    '<div ng-class="{ blue: \'{{COL_FIELD.sex}}\' == \'male\', 
    green: \'{{COL_FIELD.sex}}\' == \'female\'}">
    {{ COL_FIELD.first }} {{ COL_FIELD.last }}</div>'

我创建了一个plunkr，其中包含此问题的完整示例：https://plnkr.co/edit/rob144gVQo6uy1AVuJlS

我也尝试在网格对象和角度$ scope.apply上调用各种刷新方法，但没有效果。

Answer 1

您可以动态使用cellCss而不使用cellTemplate。

首先必须在Code

中的某处注册gridApi

$scope.gridOptions.onRegisterApi = function ( gridApi ) { 
  $scope.gridApi = gridApi;
}

然后，在数据发生变化的地方添加数据变更通知调用

$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );

这基本上会告诉ui-grid数据被更改并重新计算CSS值。 see here

Answer 2

正确的方法是通过附加一个函数在单元格模板中使用grid.appScope对象：

cellTemplate: '<div ng-class="{ \'my-css-class\': grid.appScope.rowFormatter(row) }"> ... '

其中rowFormatter应该是一个二进制函数，必须附加到控制器中的作用域：

$scope.rowFormatter = function(row) {
    return row.entity.gender === 'male';
};

这实际上隐藏在文档示例中：
http://ui-grid.info/docs/#/tutorial/317_custom_templates

如何在ui-grid中实现反映页面内容变化的动态css类？

2 个答案: