Different ng-classes based on conditional?

Question

How do I modify this example to highlight green for > 30, red for < 20 and orange for remainder?

$scope.gridOptions = { 
    data: 'myData',
    rowTemplate: '<div style="height: 100%" ng-class="
                                        {green: row.getProperty(\'age\')  < 30}">
                      <div ng-repeat="col in visibleColumns()"
                           class="ngCell col{{$index}} {{col.cellClass}}"ng-cell>
                      </div>
                  </div>'
};

color-grid

Official plnkr for the code (and to run it)

bingjie2680 · Accepted Answer · 2013-06-01 17:03:00Z

2

use orange as default class, and apply the other classes conditionally, but in Css, the green and red should be declared after orange, so it will overwrite orange. this should do it:

<div style="height: 100%" 
      ng-class="{ green: row.getProperty(age)>30, 
                  red: row.getProperty(age) < 20}" 
      class="orange">
</div>

or use this without minding css ordering:

 <div style="height: 100%" 
      ng-class="{ green: row.getProperty(age)>30, 
                  red: row.getProperty(age) < 20,
                  orange: 20 <= row.getProperty(age) <= 30}" >
</div>

edited Jun 1, 2013 at 17:03

answered Jun 1, 2013 at 16:57

bingjie2680

7,7839 gold badges50 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Foo Stack Over a year ago

Ahhh, the comma notation. So simple now that I think about it. Thanks.

Collectives™ on Stack Overflow

Different ng-classes based on conditional?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related