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

matlab - error with cyclic autocorrelation function -

django - (fields.E300) Field defines a relation with model 'AbstractEmailUser' which is either not installed, or is abstract -

c# - What is a good .Net RefEdit control to use with ExcelDna? -