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


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

I get this when using track by vehicle.slider_spot

and when i track by $index it show


#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


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

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: