Ion-slide-box breaks when removing an item #1578

emertechie · 2014-06-05T16:02:01Z

Demo: http://codepen.io/emertechie/pen/tfqsD

See original forum post for more details

perrygovier · 2014-06-05T19:05:59Z

Yeah, the update() method should clean that up better. Thanks, we'll look in to it.

turian · 2014-06-06T18:22:02Z

+1

pbernasconi · 2014-07-15T12:34:41Z

@perrygovier There is still an issue with deleting a slide inside the slidebox (using ng-repeat in my case). I find that if you open the slidebox, and immediately press delete it works fine, but if you open, scroll to a different index, it breaks after delete.

I fixed this using:

<button class="button button-clear" ng-click="deletePhoto()">DELETE</button>

...
<ion-slide-box class="content" on-slide-changed="slideChanged()">
    <ion-slide class="has-header" ng-repeat="item in slidePhotos" >
        <img ng-src="{{item.foto}}">
    </ion-slide>
</ion-slide-box>

and

$scope.deletePhoto = function () {
      var currentIndex = $ionicSlideBoxDelegate.currentIndex();
      $scope.slidePhotos.splice(currentIndex, 1);
      $ionicSlideBoxDelegate.update();
    };

    $scope.slideChanged = function () {
      $ionicSlideBoxDelegate.update();
    }
}

Where slideChanged() actually makes the real difference and updates the delegate each time a slide is deleted.

motionsmith · 2014-08-12T17:55:37Z

+1

motionsmith · 2014-08-18T20:46:12Z

Here is a codepen showing an issue with removing slidebox slide (via ng-repeat).

http://codepen.io/motionsmith/pen/frjoe

To repro, click the "delete this slide" button. In the code, I transition you to the next slide, then delete the previous slide after the transition has definitively completed.

I desperately need a work around...a way to delete a slide that is to the left of the currentIndex(). Please let me know if there is something I can in in the interim of this getting fixed.

Closes #2336. Closes #2317. Closes #2290. Closes #2228. Closes #2067. Closes #1890. Closes #1865. Closes #1850. Closes #1755. Closes #1688. Closes #1578. Closes #1501. Closes #1353. Closes #1342. Closes #782. Closes #416. Closes #2288. BREAKING CHANGE: The slideBox's API has undergone many changes. - **`<ion-slide-box>`** attributes have changed (see [documentation](http://ionicframework.com/docs/api/directive/ionSlideBox)): * `active-slide` has changed to `selected`. Change your code from this: ```html <ion-slide-box active-slide="activeSlideIndex"></ion-slide-box> ``` To this: ```html <ion-slide-box selected="activeSlideIndex"></ion-slide-box> ``` * `does-continue` has changed to `loop`. Change your code from this: ```html <ion-slide-box does-continue="shouldLoop"></ion-slide-box> ``` To this: ```html <ion-slide-box loop="shouldLoop"></ion-slide-box> ``` * `auto-play` and `slide-interval` have been merged into `auto-play`. Change your code from this: ```html  <ion-slide-box auto-play="true" slide-interval="1000"> </ion-slide-box>  <ion-slide-box auto-play="false" slide-interval="1000"> </ion-slide-box> ``` To this: ```html  <ion-slide-box auto-play="1000"></ion-slide-box>  <ion-slide-box auto-play="false"></ion-slide-box> ``` * `show-pager` and `pager-click` have been removed. Use a child `<ion-slide-pager>` element. See the [`ion-slide-pager` documentation](http://ionicframework.com/docs/api/directive/ionSlidePager). Change your code from this: ```html  <ion-slide-box show-pager="true"> </ion-slide-box>  <ion-slide-box show-pager="true" pager-click="doSomething(index)"> </ion-slide-box> ``` To this: ```html <ion-slide-box>  <ion-slide-pager></ion-slide-pager> </ion-slide-box> <ion-slide-box>  <ion-slide-pager ng-click="doSomething(index)"></ion-slide-pager> </ion-slide-box> ``` - **`$ionicSlideBoxDelegate`** methods have changed (see [documentation](http://ionicframework.com/docs/api/service/$ionicSlideBoxDelegate)): - `update()` has been removed. slideBox updates on its own now. - `stop()` has been removed. See `autoPlay()` below. - `start()` hass been removed. See `autoPlay()` below. - `slide(newIndex[, speed])` has been renamed to `select(newIndex[, speed]); - `currentIndex()` has been renamed to `selected()`. - `slidesCount()` has been renamed to `count()`. - New method `$ionicSlideBoxDelegate.autoPlay()`. Change your code from this: ```js // stop auto sliding $ionicSlideBoxDelegate.stop(); // later... start auto sliding $ionicSlideBoxDelegate.start(); ``` To this: ```js var autoPlaySpeed = 3000; //wait 3000 seconds between changing slide // stop auto sliding $ionicSlideBoxDelegate.autoPlay(false); // later... start auto sliding $ionicSlideBoxDelegate.autoPlay(autoPlaySpeed); ``` - `previous()` now returns the index of the previous slide and does not select. Change your code from this: ```js // select previous slide $ionicSlideBoxDelegate.previous(); ``` To this: ```js // select previous slide $ionicSlideBoxDelegate.select( $ionicSlideBoxDelegate.previous() ); ``` - `next()` now returns the index of the next slide and does not select. Change your code from this: ```js // select next slide $ionicSlideBoxDelegate.next(); ``` To this: ```js // select next slide $ionicSlideBoxDelegate.select( $ionicSlideBoxDelegate.next() ); ```

wildmandnd · 2015-02-13T15:15:18Z

Problem is still there in beta 14. Any workarounds?

albumlocker · 2015-03-22T10:33:59Z

I'm seeing this issue in RC1. Is anyone working on this? Removing slides causes all sorts of weird and unpredictable behavior.

Calling $ionicSlideBoxDelegate.update() does not help.

Fayozjon · 2015-03-24T18:11:11Z

albumlocker

http://thefitfactory.net/capital

22.03.2015, 13:34, "albumlocker" notifications@github.com:I'm seeing this issue in RC1. Is anyone working on this? Removing slides causes all sorts of weird and unpredictable behavior.

—Reply to this email directly or .

CodyMorris · 2015-05-06T06:05:44Z

I'm still seeing this and have been battling it for about a week now. Have issues with removing slides, filtering slides, and removing slides with ng-if. Anyone know if there is a way to override the slidebox's $index without shifting the UI?

marco-broccio · 2015-05-07T11:17:14Z

Same for me.

I have several memory problem on IOS and i'm forced to use ng-if to optimize the DOM.

CodyMorris · 2015-05-13T17:52:45Z

Can someone reopen this?

labrute974 · 2015-05-27T06:43:03Z

Hey guys,

I found what's the issue when removing an item.
Basically, by default, because Ionic is using ngAnimate, when you use ngRepeat, angular will not destroy the DOM of the element straight away, but it will first add the css class: ng-leave to give the user a chance to set animation when deleting an item from the array.

Now, you can disable $animate for a container and all children elements (you can then re-enable for subchildren).
See pull request: #3842

nunuqq1 · 2015-07-03T03:25:54Z

Hi everyone,
This problem seems still exists,I don't know why Ionic haven't fix this yet. I found a alternative solution for this issue.

$timeout( function() {
$ionicSlideBoxDelegate.update();
$ionicSlideBoxDelegate.slide(0);
}, 50);

this finely works for me

dwilt · 2015-08-01T17:35:06Z

+1 I'm having issues as well. What seems to be happening to me is that when I remove a slide and it's the one I'm currently viewing, it seems to visually keep it there in the DOM and it looks like it lays over top of the previous/next one (not sure which at the moment).

@nunuqq1 I came up with this solution on my own but it's still not working totally for me either. This only works if there are 2 slides and I'm on the LAST one and I delete it. It transitions me smoothly to the first like it should and that's all.

UPDATE: @nunuqq1 your solution did work. I had the .update() outside of the timeout. I was also able to keep the index the same as the one I just removed by setting the value of the active-slide model. Also, a timeout of 50 didn't work for me.. it had do to be 500 or else I saw the visual problems I described above :(

labrute974 · 2015-08-04T12:42:36Z

Has anyone tested / reviewed the pull request: #3842 ?

Because, once i applied it to my ionic version, it works like a charm. No timeout workaround, whatsoever

udeeps · 2015-08-10T06:07:49Z

@labrute974
wow, that's beautiful. indeed it works like a charm. Just when deleting last item of the array in the slidebox, the slide becomes blank. To make it work, I slide the slidebox to second last item after splicing.

$scope.slideBoxArray.splice(index, 1);
if (index === $scope.slideBoxArray.length && index > 0)
{
$ionicSlideBoxDelegate.slide(index - 1);
//or $ionicSlideBoxDelegate.previous();
}

boyfunky · 2015-08-24T09:56:44Z

@nunuqq1 ur solution works perfectly fine just did d same thing tht @dwilt using the value of the active-slide model.

taromorimoto · 2015-09-08T07:17:28Z

@labrute974 Thanks man! You saved my day!

labrute974 · 2015-09-08T09:19:31Z

No worries mate! Glad that helped!

opensorceror · 2015-09-11T06:22:32Z

Still having this issue in 1.1.0! Tried all the above but in vain.
Does anyone know a workaround?

perrygovier added slidebox and removed slidebox labels Jun 5, 2014

perrygovier self-assigned this Jun 5, 2014

adamdbradley assigned ajoslin and unassigned perrygovier Jul 28, 2014

adamdbradley added this to the 1.0.0-beta12 milestone Jul 28, 2014

adamdbradley modified the milestones: 1.0.0-beta12, 1.0.0-rc0 Sep 12, 2014

colllin mentioned this issue Sep 17, 2014

[WIP] feature: ionSlideBox: automatically update when ionSlides are added/removed #2232

Closed

4 tasks

ajoslin closed this as completed in 7ef9ad7 Oct 8, 2014

ajoslin removed the ready label Oct 8, 2014

CodyMorris unassigned ajoslin May 6, 2015

CodyMorris mentioned this issue May 13, 2015

bug: Ionic Slide Box Breaks on splice an item. Goes to last index and overlaps. #3431

Closed

ionitron-bot bot locked and limited conversation to collaborators Sep 7, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ion-slide-box breaks when removing an item #1578

Ion-slide-box breaks when removing an item #1578

emertechie commented Jun 5, 2014

perrygovier commented Jun 5, 2014

turian commented Jun 6, 2014

pbernasconi commented Jul 15, 2014

motionsmith commented Aug 12, 2014

motionsmith commented Aug 18, 2014

wildmandnd commented Feb 13, 2015

albumlocker commented Mar 22, 2015

Fayozjon commented Mar 24, 2015

CodyMorris commented May 6, 2015

marco-broccio commented May 7, 2015

CodyMorris commented May 13, 2015

labrute974 commented May 27, 2015

nunuqq1 commented Jul 3, 2015

dwilt commented Aug 1, 2015

labrute974 commented Aug 4, 2015

udeeps commented Aug 10, 2015

boyfunky commented Aug 24, 2015

taromorimoto commented Sep 8, 2015

labrute974 commented Sep 8, 2015

opensorceror commented Sep 11, 2015

Ion-slide-box breaks when removing an item #1578

Ion-slide-box breaks when removing an item #1578

Comments

emertechie commented Jun 5, 2014

perrygovier commented Jun 5, 2014

turian commented Jun 6, 2014

pbernasconi commented Jul 15, 2014

motionsmith commented Aug 12, 2014

motionsmith commented Aug 18, 2014

wildmandnd commented Feb 13, 2015

albumlocker commented Mar 22, 2015

Fayozjon commented Mar 24, 2015

CodyMorris commented May 6, 2015

marco-broccio commented May 7, 2015

CodyMorris commented May 13, 2015

labrute974 commented May 27, 2015

nunuqq1 commented Jul 3, 2015

dwilt commented Aug 1, 2015

labrute974 commented Aug 4, 2015

udeeps commented Aug 10, 2015

boyfunky commented Aug 24, 2015

taromorimoto commented Sep 8, 2015

labrute974 commented Sep 8, 2015

opensorceror commented Sep 11, 2015