Dynamic refresh background-image with ngStyle In AngularJs

Question

When i use Angular to dynamic change div 's backgroundImage, i find there are two ways to set backgrond-image:

first:

<div style="background:url({{example_expression}})"></div>

the second:

<div ng-style="{backgroundImage: 'url({{example_expression}})'}"></div>

But when i change example_expression, only the first way can dynamically change the backgroundImage.

There is a example in Plunker

What's wrong with ngStyle?

Pankaj Parkar · Accepted Answer · 2015-06-30 18:28:51Z

10

ng-style should not contain {{}} interpolation directive, you could directly access scope variable there. Also backgroundImage should be 'background-image'

Markup

<div ng-style="{'background-image': 'url('+ example_expression+')'}"></div>

Demo Plunkr

edited Jun 30, 2015 at 18:28

answered Jun 30, 2015 at 18:23

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Collectives™ on Stack Overflow

Dynamic refresh background-image with ngStyle In AngularJs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related