如何在UI Grid Angular中改变数据颜色

Question

|number | 1 3 4|

例如，我需要将"1"显示为红色，"3"显示为绿色。他们在同一个细胞里。我知道我可以使用单元格类来改变一个单元格中的整个数据颜色。但那不是我想要的。

你能给我一些提示来解决这个问题吗?还是用其他的方式来做这件事，比如Angular UI或者使用其他库。

谢谢

Answer 1

我怀疑这不是一个ui-grid的事情，作为一个一般的问题，你如何渲染数据与角色。

我可能会用一个自定义的cellTemplate和一些ng风格来做这个。问题是您的数据是如何到达单元格的-所以1 3 4来自单元格值，还是您有其他事情正在发生?

假设它们在单元格值中，那么您可能需要像

这样的内容。

<div ng-style="grid.appScope.setStyle(grid.appScope.left(COL_FIELD)>grid.appScope.left(COL_FIELD)</div>
<div ng-style="grid.appScope.setStyle(grid.appScope.mid(COL_FIELD)>grid.appScope.mid(COL_FIELD)</div>
<div ng-style="grid.appScope.setStyle(grid.appScope.right(COL_FIELD)>grid.appScope.right(COL_FIELD)</div>

,- setStyle是作用域上的一个函数，它接受一个数字并决定应用什么样式- left从您的数据中获得最左边的数字- mid从你的数据中得到中间的数字right从你的数据中得到最右边的数字

如果你的输入结构不同，那么还有其他方法可以使用cellTemplates来获得你想要的结果。

编辑:根据进一步的信息，我认为你会想要呈现你的字符串作为html，然后解析到单元格的html。我认为这是一个更广泛的问题，"angularJS如何为我渲染任意HTML"，答案可能是ng-bind-html，尽管我不太了解它。理论上，这将允许您在html中创建标记，然后通过在cellTemplate中使用ng-bind-html='COL_FIELD'将结果标记绑定到单元格中。