AngularJS : index not updating after removing array item(s) by index

Question

I am trying to remove an item from AngularJS's scope array variable using the index of the item.

(if you're to stop reading here thinking this is a duplicate, please jump to foot note links, I was able to find similar but not same questions which were answered - Or, I could have missed something so if you find EXACTLY same question I'd appreciate if you would please share the SO link for it ! Thx)

here is my example :

http://jsbin.com/seyaje/3/edit?html,output

The problem I see is, the index does not get updated automatically - every time - hence wrong item gets deleted or if the index is 'out of bounds' the item does not get deleted at all.

What I personally prefer is to pass index in my scenario, and I think it is relatively less work about not having to figure out indexes repetitively. (if the index is correct !)

How could I possibly fix this using AngularJS 1.25 ? Your constructive help is always appreciated !

This might be a similar question to followings :

AngularJS remove item from scope How to remove an Item from scope AngularJS

What I am trying to accomplish, seems little similar to :

https://stackoverflow.com/a/23810035 or http://plnkr.co/edit/51SNVMQjG3dsmpYI5RyY?p=preview

Somewhat similar unanswered question (finds the object and deletes by index): remove clicked item angularjs

remove your myIndex and ng-init at all, use $index

vp_arth
– vp_arth

2014-11-25 17:06:38 +00:00
Commented Nov 25, 2014 at 17:06 — vp_arth
– vp_arth, Commented Nov 25, 2014 at 17:06

Explosion Pills · Accepted Answer · 2014-11-25 16:57:54Z

5

The myIndex property gets set by the initialization of the repeat and it isn't updated appropriately. Instead you could just work with $index. This will update appropriately when the array changes and delete the correct elements.

<tr ng-repeat="i in items">
    <td>{{$index}}</td>
    <td>{{i.Id}}</td>
    <td>{{i.Name}}</td>
    <td>{{i.Type}}</td>
    <td>
        <button data-ng-click="deleteItemByIndex($index)">&times;</button>
    </td>
</tr>

answered Nov 25, 2014 at 16:57

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

3 Comments

ablaze Over a year ago

Please help me understand : how would "data-ng-init="$index" help ? I am trying your suggestion.

Explosion Pills Over a year ago

@ablaze actually you don't even need that

ablaze Over a year ago

I've to let it be 3 minutes to mark your suggestion as ans. ... as what you've suggested above, seem to work. Feeling that I should have tried this before spending time to write the question, but I appreciate your instant help !

Collectives™ on Stack Overflow

AngularJS : index not updating after removing array item(s) by index

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related