CODEWITHSUNDEEP
cssangularjs
jlking
jlking

Reputation: 73

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?

Upvotes: 0

Views: 847

Answers (1)

PSL
PSL

Reputation: 123739

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

Upvotes: 5

Related Questions