html5 - How can we integrate bxslider in to Angularjs app? -


iam using bxslider in angularjs app.but when use ng-repeat not working.below angular code. in advance.

<ul class="bxslider" ng-repeat="image in vm.listfullproductdetails[0].productimage">                                             <li>                                                 <img src="/{{image.productimagefilepath}}" />                                              </li>                                          </ul> 

when remove ng-repeat , add images , works fine.how can resolve problem.below code.

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

the problem repeating ul tag , thereby repeating class="bxslider". causes every image wrapped within ul , treat them separate slider.

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

check solution richard chu -> http://codepen.io/funkybudda/pen/pnmou


Comments

Popular posts from this blog

java - Static nested class instance -

c# - Bluetooth LE CanUpdate Characteristic property -

JavaScript - Replace variable from string in all occurrences -