bug: Ion-slides error returning to 1st slide with loop

[elaval]

Type: bug

Platform: all

Problem on ionic 1.2.1 & ion-slides

I have a slide box (ion-slides) with looping & slides generated via ng-repeat. Each slide has an "ion-list" with items that are also generated via ng-repeat.

For example,
Slide1: A,B,C
Slide2: D,E,F
Slide3: G,H,I

  <ion-slides options="{loop:true}">
    <ion-slide-page ng-repeat="page in controller.data">
      <ion-list>
        <ion-item ng-repeat="item in page.items">
          {{item}}
        </ion-item>
      </ion-list>
    </ion-slide-page>
  </ion-slides>

In the controller:
this.data = [
{items:["A","B","C"]},
{items:["D","E","F"]},
{items:["G","H","I"]}
]

When I swipe right on the last side, I go back to the first slide but the list content of the first slide is now distorted:

Slide1: A, A, A, B, B, B, C, C, C

The same happens if I swipe left on the first slide going to the last slide.

Example provided on Code Pen: http://codepen.io/elaval/pen/XXpoLy

[PhilHuot]

I'm having the same issue. There is a bug when you use ng-repeat in ion-slides if the loop option is set to true. Any help would be appreciated.

Tested on ionic 1.2.4

Just a note: I tested it using the deprecated ion-slide-box and its working fine.

[wittayaatt]

I have found the workaround. I am not so sure if this part of code is actually about but I noticed they remove ng-repeat of looped slide here. So, I add the code to remove ion-slide-page children's ng-repeat.

var newNodeChild = newNode.find('ion-item');
newNodeChild.removeAttr('ng-repeat');

Full ionic.bundle.js start at line 11006

for (i = 0; i < appendSlides.length; i++) {
  newNode = angular.element(appendSlides[i]).clone().addClass(s.params.slideDuplicateClass);
  newNode.removeAttr('ng-transclude');
  newNode.removeAttr('ng-repeat');

  var newNodeChild = newNode.find('ion-item');
  newNodeChild.removeAttr('ng-repeat');

  scope = angular.element(appendSlides[i]).scope();
  newNode = $compile(newNode)(scope);
  angular.element(s.wrapper).append(newNode);
    //s.wrapper.append($(appendSlides[i].cloneNode(true)).addClass(s.params.slideDuplicateClass));
}
for (i = prependSlides.length - 1; i >= 0; i--) {
    //s.wrapper.prepend($(prependSlides[i].cloneNode(true)).addClass(s.params.slideDuplicateClass));

  newNode = angular.element(prependSlides[i]).clone().addClass(s.params.slideDuplicateClass);
  newNode.removeAttr('ng-transclude');
  newNode.removeAttr('ng-repeat');

  var newNodeChild = newNode.find('ion-item');
  newNodeChild.removeAttr('ng-repeat');

  scope = angular.element(prependSlides[i]).scope();
  newNode = $compile(newNode)(scope);
  angular.element(s.wrapper).prepend(newNode);
}

Hope this help.

[Aknilam]

+1

I faced similar problem, I modified your Code Pen http://codepen.io/elaval/pen/XXpoLy. Here is delayed change of slides data and auto change of slides.

@wittayaatt unfortunately your code didn't help in this case

[ruslan-fidesio]

Stumbled upon the same problem, here is an example : https://codepen.io/ruslan-fidesio/pen/qNLqYk using the nightly build.

Does anyone have a workarround ?

[TzaddikO]

@ruslan-fidesio I don't think that's the same issue..

However this is still broken in 1.3.1

Here is an updated modification of elaval's Code Pen: http://codepen.io/toltman/pen/mAKEOx

[rgarciape]

Hi @elaval ,

Have you found any workaround?

I´m testing ion-slide component with the option loop set and I suppose my Issue is more or less the same.

The index that I obtain when I load the component is loaded returnning activeIndex = 2, but only running on devices. However, when I launch the app via ionic serve it works fine.

Here are my ionic info:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v7.3.0
Xcode version: Not installed

Thanks in advance¡

[jgw96]

This issue was moved to ionic-team/ionic-v1#33

[CodeTectonics]

I had a similar issue and found that using an ng-if to remove the ion-slides element until the data is loaded into the scope worked for me.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.