Question

我在Angularjs应用程序中使用bxslider。但是当我使用ng-repeat时它不起作用.Below是角度代码。在此先感谢。

<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>

Answer 1

问题是你正在重复ul标签，从而重复class =＆＃34; bxslider＆＃34;。这会导致每个图像都包含在ul中，并将它们视为单独的滑块。

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

Richard Chu检查此解决方案 - ＆gt; http://codepen.io/funkybudda/pen/pnmou

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

1 个答案: