Rolando Rolando - 6 months ago 11
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>
</div>

Answer

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

CSS

.type-sport {
   color: red;
}

.type-rock {
   color: gray;
}

HTML

<div ng-repeat="item in objects">
   <div class="type-{{:: item.type.toLowerCase() }}">{{item.item}}</div>
</div>
Comments