Quetion with ion-slide-box and ng-repeat [SOLVED]

ionic-v1
1

Hi

I have a odd problem when im using <ion-slide-box>.
In the browser and on android it looks as it should.
But on IOS 9.2 it duplicate or breaks with the error duplicate index.

I set track by like this:
<ion-slide ng-repeat="vehicle in vehicles track by vehicle.spotId"
this gives the duplicate index error

and like this
<ion-slide ng-repeat="vehicle in vehicles track by $index"
this duplicates the entire vehicles object

has anyone had this issue and know how to fix it?

thanks

2

Could you provide a minimal codepen to test against?

3

Can only provide on Monday dont have code with me now

But in a nutshell it creates the $scope.vehicles once the $http gets data back from the webservience

4

Ok here is the codepen link
The vehicle object remains the same and the ng-repeat.
The image is pulling from Ionic’s example of the slider

5

Hmm, maybe it’s because of simplified demo, but Im not able to recreate an issue.

6

Hmm,
Could it be because the object gets created when a $http post call is completed?
This happens when the page is loaded, i have a link in the index file to a custom model.js file.

Will try declare it at the top of the controller as a empty object

7

You might also want to just call $ionicSlideBoxDelegate.update(); after getting the data back from your HTTP.

8

I do have that :frowning:

$ionicSlideBoxDelegate.slide(0);
$ionicSlideBoxDelegate.update();
angular.element(document).ready(function () {
    $scope.slideChanged(0); //this is to update the option selectable by slider
});

and resetting it at the biginning of the controller didnt help

9

At what moment are you calling the update method? Are you sure the http call has already finished when calling it?

10

i am calling $ionicSlideBoxDelegate.update(); in the .success function of the $http after $scope.vehicles gets its data.
I console.log($scope.vehicles) and it looks as it should.

But in IOS it looks like this
[0]{name:test, sliderSpot:0} [1]{name:test, sliderSpot:0}

foreach item it duplicates it once

11

Maybe the $ionicSlideBoxDelegate isn’t properly loaded yet on the callback. Could you try to update the slidebox with a timeout? Just set it after 2/3 seconds. This way you can ensure yourself that the slidebox is fully loaded. Just use a little timeout like this on the callback:

setTimeout(function(){
// do stuff here
$ionicSlideBoxDelegate.update();
}, 3000)

if it works, just set the timeout back to 1 second or maybe 500ms . This way your users won’t notice the resizing event.

Also use a track by (if you aren’t already) on the repeat to ensure their aren’t any doubles in your dataset

12

still the same issue.

image
Screen Shot 2016-03-14 at 5.35.57 PM.png1000×471 233 KB

I get this when using track by vehicle.slider_spot

and when i track by $index it show
image

13

Ah. It seems your first item is coming in twice. Are you sure the data you plug in to is correct? If you use track by, make sure u specify an unique key, like $index if you don’t have a unique key in your objects… But I suppose that won’t fix your problem, since the first element is a duplicate.

Are you the owner of the data collection? Maybe it’s possible to add an unique id per item? Then use track by [unique_id_i_just_made_up] . The repeater should skip the duplicate items. I know it’s a workaround, but I can’t really tell what the problem is without a good example (Pen)

14

yes this is because the vehicle has ben added twice to the user profile.

here is screenshots of the object expanded, i’m tracking by slider_spot
image
image
this works fine in the browser and on android. issue is only on IOS

15

Do you wanna display the item twice or just once?

16

once per item.
the user can have two of the same vehicles
there is the slider when its working
image

ionic list returned this
Cordova CLI: 6.0.0
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v4.4.0
Xcode version: Xcode 7.2.1 Build version 7C1002

I also ran ionic lib and the apps version is 1.2.4

17

Does the same thing happen if you don’t use the slidebox? I.e. just use a div to repeat over or something

18

just checked is it doing the same problem on a div also tried using ion-slides

my solution to this issue is to loop through the object and assign key, value to a new object

$scope.vehiclesHolder = returnData;                  
$scope.vehicles = [];
angular.forEach($scope.vehiclesHolder, function(value, key) {
    $scope.vehicles[key] = value;
});
19

Okay, if it’s a solution for you and it works! At least now we know this issue has actually not that many to do with the ion-slides directive :slight_smile: