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

Question

我在 Angularjs app.But 中使用 bxslider 当我使用 ng-repeat 时它不是 working.Below 是 angular 代码。提前致谢。

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

                                            </li>

                                        </ul>

当我删除 ng-repeat 并添加一些图像时，它起作用了 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>

查看 Richard Chu 的解决方案 -> http://codepen.io/funkybudda/pen/pnmou

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

How can we integrate bxslider in to Angularjs app?

html

bxslider

angularjs