dynamic background image with angularJS javascript

Question

i am loading some images into DOM and creathing an array to hold these images. I want to dynamically change background image of a div called wrapper from collecting image from the array. How to do this?

Now I have this

$scope.$on('$viewContentLoaded', function() {
    $rootScope.backgroundImg="url('http://abounde.com/uploads/images/office.jpg')";   
    $rootScope.loading = false;
    console.log("about page loaded");
});

I want something like this

var images =[imageObject1, imageObject2, imageObject3];  
//imageObject are already loaded and when i 
//call them inside a html div using .html(), 
//they show as <img src="source of the image"/>

$scope.$on('$viewContentLoaded', function() {
    $rootScope.backgroundImg="url('images[0]')";   
    $rootScope.loading = false;
    console.log("about page loaded");
});

I can create object and store them in array. I just need to have a way to use thsee image in the backgroundImg variable which sets the background style of a div

if you want a background image don't use a <img /> tag, use the div and use ng-style to bind the scope data to the html attribute — Daniel Lizik
– Daniel Lizik, Commented Aug 3, 2016 at 13:59
@Daniel_L yes, I mentioned about the img tag which i found in the dom inspector. I did not use it in my code. — Nurul Alam
– Nurul Alam, Commented Aug 3, 2016 at 14:16

Ismail RBOUH · Accepted Answer · 2016-08-03 14:06:42Z

1

You can use ngStyle :

<html ng-app  ng-style="htmlStyle">
    <!-- Html here -->
</html>

Then:

var images =[imageObject1, imageObject2, imageObject3];
var currenBackground = 0;
$scope.$on('$viewContentLoaded', function() {
    var current = currenBackground++ % images.length;
    $rootScope.htmlStyle = {
       backgroundImage: "url("+ images[current].src +")"
    };   
    $rootScope.loading = false;
    console.log("about page loaded");
});

answered Aug 3, 2016 at 14:06

Ismail RBOUH

10.5k2 gold badges26 silver badges37 bronze badges

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

Comments

Jorge Alberto · Accepted Answer · 2016-08-03 14:12:48Z

0

First you need to put your array of images url at scope:

$scope.$root.images = ['imageurl', 'imageurl1', 'imageurl2'];

At HTML you need to put

ng-style="{'background-image': 'url({{ $root.images[0] }})'}

This will work!

answered Aug 3, 2016 at 14:12

Jorge Alberto

1771 silver badge6 bronze badges

Collectives™ on Stack Overflow

dynamic background image with angularJS javascript

Now I have this

I want something like this

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Now I have this

I want something like this

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related