我正在将一些图像加载到DOM中并且使用数组来保存这些图像。我想动态地改变一个叫做包装器的div的背景图像，从数组中收集图像。 怎么做？
$scope.$on('$viewContentLoaded', function() {
$rootScope.backgroundImg="url('http://abounde.com/uploads/images/office.jpg')";
$rootScope.loading = false;
console.log("about page loaded");
});
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");
});
我可以创建对象并将它们存储在数组中。我只需要一种方法在backgroundImg变量中使用thsee图像来设置div的背景样式
答案 0 :(得分：1)
您可以使用ngStyle：
<html ng-app ng-style="htmlStyle">
<!-- Html here -->
</html>
然后：
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");
});
答案 1 :(得分：0)
首先，您需要将您的图像数组url放在范围内：
$scope.$root.images = ['imageurl', 'imageurl1', 'imageurl2'];
在HTML中你需要输入
ng-style="{'background-image': 'url({{ $root.images[0] }})'}
这会有效！