如何使用AngularJS更改后台URL

时间:2018-03-02 15:07:09

标签: javascript angularjs

我在html文件中使用class =“img”,在javascript文件中我有这个:

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

我希望每一秒都能改变图像,我有类似的东西

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

我不确定此部分"url({{features[0].images[int++]}})"是否正确。

感谢您的时间

1 个答案:

答案 0 :(得分:1)

应该是

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

<强>样本

&#13;
&#13;
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);
    

})    
&#13;
<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.0-beta.5" 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>
&#13;
&#13;
&#13;