AngularJS: change color of a cell based on a condition ng-grid

3
votes

Here is the plnkr code. I want to change the color of the age cell for all the rows that their alert property is true. I am not sure how to do it. I don't have a separate column for the alert.

1
angularjscolorsng-grid

1 Answers

6
votes

Here you go. Refer this modified PLUNKER. Escaping single quote here but indenting the template for better readability.

<div class="ngCellText" 
     ng-class="{\'green\': row.getProperty(\'alert\') == \'true\' }">
         {{ row.getProperty(col.field) }}
</div>

Above case is when alert is the string representation of booleans ("true"/"false"). When alert is boolean, then the template becomes less clumsy: 

<div class="ngCellText" ng-class="{\'green\': row.getProperty(\'alert\') }">
         {{ row.getProperty(col.field) }}
</div>

UPDATE:
To reduce some verbosity going around there, we can directly use row.entity.alert:

<div class="ngCellText" 
     ng-class="{\'green\': row.entity.alert == \'true\' }">
         {{ row.getProperty(col.field) }}
</div>