Rolando Rolando - 2 years ago 61
AngularJS Question

Inline font color based on keyvalue in angular template?

Say I have an array of objects:

var objects = [{'item':'A','type':'Sport'},{'item':'B','type':'Rock'}]

I want to make it so that if the type is Sport, set "color:red" for that div. If type is "Rock", then set "color:gray" for that div.

How do I do something like this?

<div ng-repeat="item in objects">
<div style="color:red if item.type='Sport', color:gray if item.type='Rock'">{{item.item}}</div>

Answer Source

Here is something I like to do in those cases, make CSS classes and concatenate the class name to use it ... like this:


.type-sport {
   color: red;

.type-rock {
   color: gray;


<div ng-repeat="item in objects">
   <div class="type-{{:: item.type.toLowerCase() }}">{{item.item}}</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download