2016-09-01 6 views
2

ng-repeatでイオンスライダでdivに背景を追加する必要がありますが、動作しません。バックグラウンドスタイルは、イオンスライドボックスでng-repeatの内部では動作しません。

私は、次のコードを使用している

テンプレート

 <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" 
]; 

私はこの問題を解決するために助けてください。

+0

あなたが■はdiv要素の幅と高さを設定しましたワーキング? –

+0

はい幅と高さを設定します –

+0

要素を検査すると何が表示されますか?スタイルは現れますか? – ygesher

答えて

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

関連する問題