我们如何将bxslider集成到Angularjs应用程序中?

我们如何将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>

我在Angularjs应用程序中使用bxslider。但当我使用ng repeat时,它不起作用。下面是angular代码。 提前谢谢

<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提供的此解决方案->