2016-03-31 5 views
0

Angularjsアプリでbxsliderを使用していますが、ng-repeatを使用すると動作しません。角度は角度コードです。 ありがとうございました。bxsliderをAngularjsアプリにどのように統合できますか?

<ul class="bxslider" ng-repeat="image in vm.listFullProductDetails[0].ProductImage"> 
              <li> 
               <img src="/{{image.ProductimageFilepath}}" /> 

              </li> 

             </ul> 

私はNGリピートを削除し、いくつかの画像を追加すると、それはfine.How iがproblem.Belowがコードで解決することができます動作します。

<ul class="bxslider"> 
            <li> 
             <!--<img ng-src="/{{image.ProductimageFilepath}}" />--> 
             <img src="/Images/user4.jpg" /> 
            </li> 
            <li> 
             <!--<img ng-src="/{{image.ProductimageFilepath}}" />--> 
             <img src="/Images/user4.jpg" /> 
            </li> 
            <li> 
             <!--<img ng-src="/{{image.ProductimageFilepath}}" />--> 
             <img src="/Images/user4.jpg" /> 
            </li> 
            <li> 
             <!--<img ng-src="/{{image.ProductimageFilepath}}" />--> 
             <img src="/Images/user4.jpg" /> 
            </li> 
            <li> 
             <!--<img ng-src="/{{image.ProductimageFilepath}}" />--> 
             <img src="/Images/user4.jpg" /> 
            </li> 
            <li> 
             <!--<img ng-src="/{{image.ProductimageFilepath}}" />--> 
             <img src="/Images/user4.jpg" /> 
            </li> 
           </ul> 

答えて

0

問題は、ulタグを繰り返してclass = "bxslider"を繰り返すことです。これにより、すべてのイメージがul内にラップされ、個別のスライダとして扱われます。

  <ul class="bxslider"> 
       <li ng-repeat="slide in slides"> 
       <img ng-src="{{slide.src}}" alt="" /> 
       </li> 
       </ul> 

チェックリチャード・チューによりこの溶液 - >