我们如何将bxslider集成到Angularjs应用程序中?
我在Angularjs应用程序中使用bxslider。但当我使用ng repeat时,它不起作用。下面是angular代码。 提前谢谢我们如何将bxslider集成到Angularjs应用程序中?,angularjs,html,bxslider,Angularjs,Html,Bxslider,我在Angularjs应用程序中使用bxslider。但当我使用ng repeat时,它不起作用。下面是angular代码。 提前谢谢 <ul class="bxslider" ng-repeat="image in vm.listFullProductDetails[0].ProductImage"> <li>
<ul class="bxslider" ng-repeat="image in vm.listFullProductDetails[0].ProductImage">
<li>
<img src="/{{image.ProductimageFilepath}}" />
</li>
</ul>
当我删除ng repeat并添加一些图像时,效果很好。如何解决问题。下面是代码
<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>
问题在于您正在重复ul标记,从而重复class=“bxslider”。这将导致每个图像都被包装在ul中,并将它们作为单独的滑块处理
<ul class="bxslider">
<li ng-repeat="slide in slides">
<img ng-src="{{slide.src}}" alt="" />
</li>
</ul>
查看Richard Chu提供的此解决方案->