如何自定义有角度的ui-grid行背景颜色？

Question

I am trying to change background color of angular ui-grid row based on condition so if riskValue is 1 trying to make it red and if value is 2 row background color should be Yellow. Any easy way to achieve this task ?

config.js

"columnDefs": [{
        "name": "Ticket Number",
        "field": "ticketNum",
        "width": 120
    },
    {
        "name": "Asset Id ",
        "field": "assetID",
        "width": 100
    },
    {
        "name": "Severity",
        "field": "severity",
        "width": 100
    },
    {
        "name": "Risk Index",
        "field": "riskIndex",
        "width": 100
    },
    {
        "name": "Risk Val",
        "field": "riskValue",
        "cellTemplate": "<div ng-if=\"row.entity.Comments_Col1 != 'none'\" title={{row.entity.riskValue}} \" ><div style='white-space:nowrap;border-bottom: 1px solid red !important; height:100%;width:100%;'>{{row.entity.riskValue}}</div></div>",
        "sort": {
            "direction": "aesc",
            "priority": 0
        },
        "width": 100,
        "visible": false
    }
],

Answer 1

You can use gridOptions.cellClass

cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
    if (row.entity.riskValue === 1) 
        return 'red';
    if (row.entity.riskValue === 2)
        return 'yellow';
}

where red and yellow are css classes.

This method requires adding the function to all of your columnDefs but allows to choose only some columns, which should have changed background color.

Sample: http://plnkr.co/edit/Xie68a3sT9CXTdCuI3tq?p=preview