Splice in array with ng-repeat

[Joberto Diniz]

I need to insert elements in the first position of an array:

Array.prototype.splice.apply($scope.timeSlots, [0, hoursAgo].concat(slots));

However, angular mess up the view, showing wrong items and even disapearing with one.

 <div ng-repeat="timeSlot in timeSlots" class="time-slot">

Anyone had issues with splice?

[Sander Elias]

Hi Joberto,

If you do tricks like this to array’s you need a track by in your ng-repeat. and not on $index
You need to add this because of the way angular keeps track on where to put which element in the DOM
I suspect you have an id in the timeslots array? do something like this:

<div ng-repeat="timeSlot in timeSlots track by _id">

Regards
Sander

​

[Joberto Diniz]

Didn't know we could use any property in the track by.

I didn't have an id property, but I've created one:

itaas.TimeSlot = function (start, end) {
    this.schedules = [];
    this.start = start;
    this.end = end;
    this.id = start.valueOf() + end.valueOf(); //needed for "ng-repeat track by id"
};

And

 <div ng-repeat="timeSlot in timeSlots track by id" class="time-slot">

However, it is throwing ng-repeate dupes error.

There isn't a duplicate id:

var ids = _.pluck($scope.timeSlots,'id'); //[2826946800000, 2826954000000, 2826961200000, 2826968400000, 2826975600000, 2826982800000]

_.uniq(ids) //[2826946800000, 2826954000000, 2826961200000, 2826968400000, 2826975600000, 2826982800000]

Any thoughts?

[Sander Elias]

Hi Joberto,

Sorry, I missed a little subtle part :-D

try this:

<div ng-repeat="timeSlot in timeSlots track by timeSlot.id" class="time-slot">

Sorry for the confusion
Regards
Sander

​

[Joberto Diniz]

Thanks, but it didn't work.

I've created a plunker: http://plnkr.co/edit/BCPgyTme83d5Lm1W6x3K?p=preview

Could you take a look?

[Sean Amoroso]

Man I could've used used Sander's response on Monday!  Fun week.  Looking at your plunkr you need to modify the $scope.timeSlots array, you're just modifying the earlier array object which doesn't relate to $scope.timeSlots.

Something like this:

$scope.timeSlots.push(new itaas.TimeSlot(now.clone().subtract(2,'hours'),now.clone().subtract(1,'hours')));

$scope.timeSlots.push(new itaas.TimeSlot(now.clone().subtract(1,'hours'),now.clone()));

[Joberto Diniz]

It is not that. The following line is modifying the $scope.timeSlots array:

Array.prototype.splice.apply($scope.timeSlots, [0, 2].concat(earlier));

[Joberto Diniz]

Thanks Sander, it worked!

The parameters I was passing were wrong:

Array.prototype.splice.apply($scope.timeSlots, [0, 0].concat(earlier));