change the font color based on value angular js

Question

I am using AngularJS and I use ng-repeat to loop and show the details in the page.

Is there a possibility to change the font color based on the value?

<li ng-repeat="s in vm.States" >                        
  <span>{{s.Name}}</span>
  <span>{{s.state}}</span>
 </li>

Test1 -Error(Red)
Test2 - Warning(blue)
Test3 - Ignored(green)

Here s.state value can be Error, Warning or Ignored
Can I show different font colors for these states via angular or css?

Answer 1

You can do it very easily by ng-class and css.

CSS code

.Error{color: red;}
.Warning{color: blue;}
.Ignored{color: green;}

Html code

<li ng-repeat="s in vm.States" >                        
  <span>{{s.Name}}</span>
  <span ng-class="s.state">{{s.state}}</span>
</li>

Answer 2

You can achieve this with following code:

<li ng-repeat="s in vm.States" >                        
  <span>{{s.Name}}</span>
  <span ng-class="{'color-red': s.state === 'Error', 'color-blue': s.state === 'Warning', 'color-green': s.state === 'Ignored'}">{{s.state}}</span>
</li>

Where 'color-red', 'color-blue', 'color-green' are your css classes.

See it in plunker.

Check documentation about ng-class.

Answer 3

It might be worth also taking a look over ngStyle which is the same as ngClass but provides conditional inline syling such as

<li ng-repeat="s in vm.States" >                        
  <span>{{s.Name}}</span>
  <span ng-style="{'color: red': s.state === 'Error', 'color: blue': s.state === 'Warning', 'color: green': s.state === 'Ignored'}">{{s.state}}</span>
</li>