Как мы можем интегрировать bxslider в приложение Angularjs?

Question

Iam, использующий bxslider в приложении Angularjs. Но когда я использую ng-repeat, он не работает. Ниже приведен угловой код. Спасибо заранее.

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

              </li> 

             </ul> 

Когда я удалить нг-повтора и добавить несколько изображений, он работает fine.How может я разрешить 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> 

Answer 1

Проблема в том, что вы повторяете тег ul и тем самым повторяете class = "bxslider". Это заставляет каждое изображение обертываться внутри ul и рассматривать их как отдельный слайдер.

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

Проверить это решение Ричард Чу ->