Array splices the wrong item in angular during ng repeat

Question

I'm trying splice items from an array but it removes the wrong item each time. I believe it is becuase I filter the array array using orderBy, so the array on the DOM is different from the array in the controller. My question now is how do I correctly splice the right item from the array even after filtering, and also is there any way I can use the orderBy filter in by controller?

Heres my controller

office.controller('notificationCtrl',['$scope',$http',function($scope,$http){

    $scope.latest = [
         {
           id:1,
           date : "2017-01-11T19:33:17.307452",
           arrived: false,
           location : "europe"
         },
         {
           id: 2,
           date: "2017-01-11T20:19:47.745673",
           arrived:false,
           location : "africa"
         }

    ]

    $scope.accept = function(array,index){
       array.splice(index,1)
    }
}]

Source.html

<div ng-repeat="recent in latest | orderBy : recent.date : true">
    <button ng-click="accept(latest,$index)">Accept</button>
</div>

EDIT I've added example data as requested, in the data above if I try to splice the second item, it spices the first instead.

Can you provide some example data?

Pritam Banerjee
– Pritam Banerjee

2017-01-11 19:41:14 +00:00
Commented Jan 11, 2017 at 19:41 — Pritam Banerjee
– Pritam Banerjee, Commented Jan 11, 2017 at 19:41
@PritamBanerjee edited as requestd

HackAfro
– HackAfro

2017-01-11 19:59:17 +00:00
Commented Jan 11, 2017 at 19:59 — HackAfro
– HackAfro, Commented Jan 11, 2017 at 19:59

georgiy.zhuravlev · Accepted Answer · 2017-01-11 20:04:31Z

1

As written here https://docs.angularjs.org/api/ng/directive/ngRepeat you can use variable in expression as alias_expression to get/store the intermediate results of the repeater, after ordering/filtering.

variable in expression as alias_expression – You can also provide an optional alias expression which will then store the intermediate results of the repeater after the filters have been applied. Typically this is used to render a special message when a filter is active on the repeater, but the filtered result set is empty.

For example: item in items | filter:x as results will store the fragment of the repeated items as results, but only after the items have been processed through the filter.

Please note that `as [variable name] is not an operator but rather a part of ngRepeat micro-syntax so it can be used only at the end (and not as operator, inside an expression).

For example: item in items | filter : x | orderBy : order | limitTo : limit as results .

answered Jan 11, 2017 at 20:04

georgiy.zhuravlev

4857 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HackAfro Over a year ago

If you don't mind me asking. How do I use this to solve my problem?

georgiy.zhuravlev Over a year ago

when you do delete from your array, you are passing $index within filtered results to NOT filtered source array. That's why it deletes the wrong element. You should ng-click="accept(alias_expression, $index)", where alias_expression is the resulting (ordered and filtered) array.

Manu Obre · Accepted Answer · 2017-01-11 20:07:55Z

0

I think if you add the track by at the end it will work as expected. And also yo have an error in your first param, you should indicate the property with quotes like this:

<div ng-repeat="recent in latest | orderBy:'date':true track by $index">
    <button ng-click="accept($index)">Accept</button>
</div>

Your controller:

$scope.accept = function(index){
    $scope.latest.splice(index,1)
}

How to use filters in your controller:

var orderedArray= $filter('orderBy')($scope.latest, 'date');

edited Jan 11, 2017 at 20:07

answered Jan 11, 2017 at 19:59

Manu Obre

2,3041 gold badge14 silver badges12 bronze badges

4 Comments

HackAfro Over a year ago

I tried this it still doesnt work. Using the filter in the controller will be difficult as i'm filtering using one of the array properties. Eg. recent in latest | orderBy : 'recent.date' : true. Can this be done in the controller?

Manu Obre Over a year ago

what are you trying to achieve by sending the recent?

HackAfro Over a year ago

I'm trying to order the items using the recent date

Manu Obre Over a year ago

You just need to put the string 'date'

HackAfro · Accepted Answer · 2017-01-12 08:11:28Z

0

So I solved this by simply reversing my list like

var latest  = [
     {
       id:1,
       date : "2017-01-11T19:33:17.307452",
       arrived: false,
       location : "europe"
     },
     {
       id: 2,
       date: "2017-01-11T20:19:47.745673",
       arrived:false,
       location : "africa"
     }

]

$scope.latest = latest.reverse()

Then I removed the filter and just did ng-repeat on the list.

<div ng-repeat="recent in latest">
    <button ng-click="accept($index)">Accept</button>
</div>

answered Jan 12, 2017 at 8:11

HackAfro

7201 gold badge13 silver badges30 bronze badges

Collectives™ on Stack Overflow

Array splices the wrong item in angular during ng repeat

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related