Question

我需要使用ng-repeat向离子滑块中的div添加背景，但它不起作用。

我使用了以下代码

模板

       <ion-slide-box auto-play="true" does-continue="true" slide-interval="2000">
            <ion-slide ng-repeat="img in banners">
               <div class="box" ng-style="{'background': 'url('+img+') no-repeat top left'}"></div>
            </ion-slide>
        </ion-slide-box>

控制器

$scope.banners = [
                        "http://www.hdwallpapery.com/static/images/image5_170127819_PxgeF3V.jpg",
                        "http://www.hdwallpapery.com/static/images/images_1_JbTP6rz.jpg"
];

请帮我解决这个问题。

Answer 1

我的建议是在离子滑片上添加ng-style，并添加高度：100vh到.slider。

<ion-slide-box on-slide-changed="slideHasChanged($index)">
  <ion-slide ng-repeat="slide in banners" ng-style="{'background': 'url('+slide+') no-repeat top left'}">
    <div class="box blue" ></div>
  </ion-slide>
</ion-slide-box>

这是工作codepen

背景样式在离子滑动盒的ng-repeat内部不起作用

1 个答案: