SlideBox stop looping when using it with ng-repeat


#1

Am using slideBox in two cases in my app to keep slides looping am using it like this:

<ion-slide-box auto-play="true" does-continue="true" slide-interval="2500">

first case when data is static slides looping, but when am using dynamic data with ng-repeat stop looping

  <ion-slide-box auto-play="true" does-continue="true" slide-interval="2500">
                  <ion-slide ng-repeat="product in products">
                    <img class="xx" ng-src="{{product.picture}}">
                    <p>{{product.title}}</p>
                  </ion-slide>
 </ion-slide-box>

Ps. i want to mention i had another problem with slideBox that it is not working with collection-repeat seems data not biding so i used ng-repeat works fine but, wonder why is that !


#2

did you manipulate your slidebox-entries afterwards? like adding slides?
Or did your product data comes from an API (async)?

Everytime you change the array you need to call:
$ionicSlideBoxDelegate.update()
http://ionicframework.com/docs/api/service/$ionicSlideBoxDelegate/

And you should intial add the slideshow only to the dom, if there are already entries in your products-array
so add a ng-if=“products && products.length” to the ion-slide-box element


#3

yes am calling $ionicSlideBoxDelegate.update(); after each an API call and the slides loop only once. Thank you for the note of using ng-if but, as i understand track by and bind once will do this work form me but, am not sure!

<ion-slide ng-repeat="product in ::products track by product._id">
                <img ng-src="{{::product.picture}}">
</ion-slide>