이오니아 스 와이프 - 루프 반복 사용 ng-repeat

Question

나는 이오니아와 함께 스 와이프 (ion-slide)를 사용하지만, 모든 슬라이드 페이지 내에 loop : true 및 ng-repeat가있는 슬라이더를 만들 때 ng-repeat에 숫자가 곱해진다. 슬라이드의 슬라이드에만 "swiper-slide-duplicate"라고 표시됩니다.

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

나는 모든 색상 클래스 모든 슬라이드에 있지만 두 개의 슬라이드 중복 모든 것에 뷰의 NG-반복과 슬라이더를 만들 열 (슬라이드의 수)에 의해 곱이다. 내가 아는

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

, 난 루프이 슬라이드 중복을 필요로하지만 난 모든 내용이 중복 된 이유를 이해하고 슬라이드의 숫자로 번식하지 않습니다.

도움 주셔서 감사합니다.

Answer 1

나는 더 오래된 질문이며 대부분의 사람들은 이온 2를 사용한다는 것을 알고있다. 그러나 만약 당신이 아직 이오니아 1에 있다면 :

이온의 updateLoop();은 duplicate-slide에 있으면 자동으로 real slide으로 이동합니다. 그러나 당신이 미끄러 져 있고 놓지 않은 채로 (아직도 미끄러 져 잡고있는), 그것은 오래된 내용과 함께 복제본을 보여줍니다.

이 문제를 해결하려면 - 내가 마지막 슬라이드에 도달하면 duplicate slide을 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; 
     }); 
    } 
});