Change font color based on angular js value

Question

I use angular js and I used ng-repeat for the loop and show the details on the page, is it possible 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) Test 3-Ignored(green) 

here the value of s.state can be Error, Warning, Ignored Can I show different font colors for these states through angular or css

Answer 1

This can be done using the 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.

Look at the plunker .

Check the documentation for the ng class.

Answer 2

You can do this very easily with 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 3

It might be worth taking a look at ngStyle , which is the same as ngClass , but provides conditional inline silling, like

 <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> 

Answer 4

See this example.

 var myApp = angular.module('myapp',[]); myApp .controller('MyCtrl1', function ($scope) { $scope.vm = { States: [ { Name: 'Error', state: 'error', color: 'red' }, { Name: 'Warning', state: 'warning', color: 'blue' }, { Name: 'Ignored', state: 'ignored', color: 'green' } ] }; }) 

 .red{ color: red; } .blue{ color: blue; } .green{ color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myapp"> <div ng-controller="MyCtrl1"> <li ng-repeat="s in vm.States" > <span ng-class="s.color">{{s.Name}}</span> - <span ng-class="s.color">{{s.state}}</span> </li> </div> </div>