jlking jlking - 3 months ago 20
AngularJS Question

Trying to set style of div using ng-repeat

I am trying to change the background color of a div using ng-repeat. The color I am trying to pull from the object in the loop. Whenever I do this however it sets my style property equal to blank.

Here is the code that I am using:

<div ng-repeat="channel in channelObjects">
<div class="mediumTile" style="background-color:#{{channel.Color}}">
Channel Color: {{channel.color}}
</div>
</div>


This displays my mediumTile object with the correct channel color displayed. By the style is set to nothing once the page loads

This is what the page displays:

<div class="mediumTile" style="">
Channel Color: 123456
</div>


Am I doing something wrong?

PSL PSL
Answer

You should use ng-style instead of style, using style with interpolation will cause some browsers to strip the values off (invalid style attribute with the presence of {{ etc..) before even angular has a chance to process it. This happens specifically in IE (not sure which browser you tested this).

<div class="mediumTile" ng-style="{'background-color':'#' + channel.color}">

Also mind the casing as well, color.

Plnkr

Comments