AngularJS - inline css style rendering

Question

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?

Answer 1

You should use ngStyle:

an example: http://plnkr.co/edit/qT8skZzTwXjrh3Ye5mr9?p=preview

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