Ionic Swiper - ng-repeat with loop

Question

I use Swiper (ion-slide) with Ionic, but when i create a slider with loop: true and a ng-repeat inside every slide-page, the ng-repeat is multiply by the number of slide only in the slide "swiper-slide-duplicate" for the loop.

Example : https://codepen.io/clementdev/pen/qNxryJ

I create a slider with a ng-repeat for view all the color class on every slide but on the two slide duplicate everything is multiply by ten (number of slide).

<ion-slides options="data.sliderOptions" slider="data.sliderDelegate">
 <ion-slide-page ng-repeat="bgColor in data.bgColors">
  <div class="box {{bgColor}}">
    <p ng-repeat="color in data.bgColors">color class : {{color}}</p>
  </div>
 </ion-slide-page>
</ion-slides>

I know, i need this slide duplicate for the loop but i don't understand why there duplicate all content and multiply by the number of slide.

Thanks for your help.

I have the same problem. The duplication of entries occures because the elements created by ng-repeat generate new elements with ng-repeat set on them. When Swiper duplicate this page to do the loop, angular interpretes every element as a new loop. That's why each element will be duplicated as many times as there is elements in original loop. — RKI
@RKI I found two solutions but it's not very "clean" solution. I use a piece of code of function updateLoop (in file ionic.bundle.js), without call the createLoop. First solution (i use in my app) : codepen.io/clementdev/pen/ampyjA i use transitionStart with the piece of code inside a timeout and safeApply, but the transition between the slide duplicate is little faster (10ms) than the others slides. Second solution : codepen.io/clementdev/pen/Xjpaqo Use transitionEnd without safeApply and timeout, the speed is the same but you see the update data when you swipe. — clementdev

mnewmedia mnewmedia · Accepted Answer · 2017-05-12T11:42:48

I know it's an older question and most people use ionic 2 . But if you are still on ionic 1 here you go:

The updateLoop(); of ionic does if you are on a duplicate-slide automatically slide to the real slide. But while you are sliding and not releasing(still holding to slide) it shows the duplicate, with the old content.

To fix this - if I reached the last slide, I update the duplicate slide with the content of the real slide.

this.$scope.$on("$ionicSlides.slideChangeStart", (event, data) => {
  // assume i just have 3 slides and update it's content after each slide through bindings, to simulate infinite slides      
  if (data.slider.activeIndex === 3) {

      // wait with copy until bindings are updated
      this.$timeout(() => {
          let originals = document.querySelectorAll('[data-swiper-slide-index="0"]');
          let duplicates = document.getElementsByClassName('swiper-slide-duplicate');
          duplicates[1].innerHTML = originals[0].innerHTML;
      });
  }
});

Ionic Swiper - ng-repeat with loop

1 Answers