AngularJS - Reload ng-style background-image

Question

I need to dynamically change the div's ng-style background?

div:

<div ng-style="{'background-image': 'url({{candidate.image}})'}">
    {{candidate.name}}
</div>

controller:

angular.module("MyModule")

.controller("MyController", function($scope) {
    $scope.candidate = {
        "image" : "myurl.png",
        "name" : "My Name"
    };

    $scope.changeCandidate = function() {
        $scope.candidate = {
            "image" : "anotherurl.png",
            "name" : "Another Name"
        };
    };
});

When a button fires changeCandidate() function, the displayed name changed from My Name to Another Name but the background-image of ng-style remains the same

pegla · Accepted Answer · 2017-09-21 07:41:29Z

2

Here's working example:

https://jsfiddle.net/px3w7w3u/1/

When you're using ng-style use object with key value pairs and pass it. In your case you should have something like this:

$scope.candidate = {
        "style" : {
            backgroundImage: "url(myurl.png)"
        },
        "name" : "My Name"
    };

$scope.changeCandidate = function() {
    $scope.candidate = {
        "style" : {
           backgroundImage: "url(anotherurl.png)"
         },
        "name" : "Another Name"
    };
};

Then in html:

<div ng-style="candidate.style">
    {{candidate.name}}
</div>

One thing to point out, if you need to have dashes use camel case - same as for directives and components in your case backgroundImage transforms to background-image css:

more info:

https://www.w3schools.com/angular/ng_ng-style.asp

edited Sep 21, 2017 at 7:41

answered Sep 21, 2017 at 7:33

pegla

1,8864 gold badges19 silver badges20 bronze badges

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

1 Comment

Michael 'Maik' Ardan Over a year ago

Hey pegla, this worked for me. Thanks for the reference too!

Maxim Shoustin · Accepted Answer · 2017-09-21 07:39:04Z

1

Write custom style:

 $scope.getStyle = function(url){
  return {
    'background-image': "url(" + url + ")",
    'background-position': 'center center'
  }      
}

and usage:

<div ng-style="getStyle(candidate.image)">
    {{candidate.name}}
</div>

Demo Fiddle

answered Sep 21, 2017 at 7:39

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Comments

Immanuel Kirubaharan · Accepted Answer · 2017-09-21 07:29:11Z

0

Can you try to load the div after getting background image in your scope by using ng-if as shown below,

<div ng-if="candidate.image" ng-style="{'background-image': 'url({{candidate.image}})'}">
    {{candidate.name}}
</div>

answered Sep 21, 2017 at 7:29

Immanuel Kirubaharan

1,1041 gold badge11 silver badges18 bronze badges

1 Comment

Michael 'Maik' Ardan Over a year ago

Hi Immanuel. I keep getting the same result even with ng-if in my div.

Collectives™ on Stack Overflow

AngularJS - Reload ng-style background-image

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related