Trying to set style of div using ng-repeat

Question

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 · Accepted Answer · 2015-05-28 01:37:40Z

5

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

edited May 28, 2015 at 1:37

answered May 28, 2015 at 1:31

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trying to set style of div using ng-repeat

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related