Dynamically update background image using ngStyle In AngularJs

Question

When I use Angular to dynamically change the backgroundImage div , I find that there are two ways to set backgrond-image:

first:

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

second:

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

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

Plunker gives an example:

What happened to ngStyle?

Answer 1

ng-style should not contain the interpolation directive {{}} , you can directly access the sphere variable. Also backgroundImage should be 'background-image'

Markup

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

Demo plunkr