CODEWITHSUNDEEP
javascriptangularjs
sam jackson
sam jackson

Reputation: 87

how to change background url using AngularJS

I have div in html file with class="img" and in the javascript file I have this:

var features = [ 
    {
       title:'book a room'
       images: ['image1', 'image2', 'image3' ]
    },
    {
       title: 'book a class'
       images: ['image4', 'image5']
    }];

and I want for everysecond the image change, I have something like this

var int = 0;
$interval(function() {
  document.querySelector(".img").style.background = "url({{features[0] .images[int++]}})";
}, 1000);;

I'm not sure if this part "url({{features[0].images[int++]}})" is correct or not.

Thanks for ur time

Upvotes: 2

Views: 53

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

It should be as

 ng-style="{'background-image':'url('+slide+')'}"  >

DEMO

angular.module('myApp', [])

.controller('mainController', function($scope,$interval) {

   var features = [ 
    {
       title:'book a room',
       images: ['http://31.media.tumblr.com/bc0ea7c5f95701bff499f78b59d23e68/tumblr_mr74z9Lt3O1rs0z5go1_500.jpg', 'http://38.media.tumblr.com/875b5eeb5b1efa37d2e9d36fbad836d3/tumblr_mzczesVrZD1rimr6yo1_1280.jpg' ]
    }];
    $scope.slide = features[0].images[0];
    $interval(function(){
      if($scope.slide == features[0].images[0])
          $scope.slide = features[0].images[1];
      else
          $scope.slide = features[0].images[0];
    }, 1000, 0);
    

})    
<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="mainController" ng-style="{'background-image':'url('+slide+')'}"  >
    <h1>Hello Plunker!</h1>
  </body>

</html>

Upvotes: 1

Related Questions