Reputation: 616

AngularJS - inline css style rendering

Is it possible / and how / to write inline css style using angular variables?

<div style="background: transparent url({{eventInfo.eventHeaderImg}}) top center no-repeat;"></div>

This is my output

"NetworkError: 404 Not Found - http://test/eventInfo.eventHeaderImg"

So I see it didn't render this value.

I know it's possible to change this in controller, but is it doable with my approach?

Upvotes: 14

Answers (4)

Reputation: 1114

This worked for my:

<div ng-style="{ 'background': 'transparent url(' + eventInfo.eventHeaderImg + ') top center no-repeat' }"></div>

Upvotes: 5

Reputation: 4216

You're "writing" a wrong url in your style, that's why you've got a 404 (not found) error.

According to this plunker, if you're $scope is well set up, you print the right data in style attribute.

Note that your eventInfo scope variable has to be a map/object.

Upvotes: 0

Reputation: 32367

<div ng-style="{ background: 'transparent url({{ eventInfo.eventHeaderImg }}) top center no-repeat' }"></div>

Upvotes: 20

Reputation: 88

You don't need to use double curl brackets there.

Upvotes: -4