AngularJS: Index not refreshing after deletion of array item(s) using their indexes

Question

AngularJS: Index not refreshing after deletion of array item(s) using their indexes

I am attempting to eliminate a specific item from an array variable within AngularJS's scope by using the item's index.

If you believe this question is a duplicate, please check out the footnote links for related questions that were not exactly the same. Any help in finding identical questions would be greatly appreciated!

Here is my example:

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

The issue I'm facing is that the index does not update automatically every time, leading to the deletion of the wrong item or failing to delete the intended item if the index is out of bounds.

In my case, I prefer passing the index as it saves me the hassle of repeatedly figuring out indexes (assuming the index is correct!)

How can I resolve this using AngularJS 1.25? Your helpful advice is always welcome!

This question may resemble the following:

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

My objective is somewhat similar to:

or http://plnkr.co/edit/51SNVMQjG3dsmpYI5RyY?p=preview

A similar unanswered question (locating and deleting by index):remove clicked item angularjs

javascript arrays angularjs angularjs-ng-repeat array-splice

Answer 1

Answer №1

When initializing the repeat loop, make sure to utilize the $index property instead of creating a separate myIndex. Using $index will ensure that your data updates correctly when the array changes and deletes the appropriate 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>

Answer 2

When initializing the repeat loop, make sure to utilize the $index property instead of creating a separate myIndex. Using $index will ensure that your data updates correctly when the array changes and deletes the appropriate 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>

AngularJS: Index not refreshing after deletion of array item(s) using their indexes

Answer №1

Similar questions

Display a preview of the uploaded image

angular ui-router child state resolve being overridden by parent's definition

"Troubleshooting a problem with ng-scrollbar within the md-sidenav component in Angular

Is there a specific method to access a JSON file with (js/node.js)?

Prevent the function from being repeatedly triggered as the user continues to scroll

Hide the dropdown menu when the user clicks anywhere else on the screen

What is the process for storing a list group in an SQL database?

Substituting placeholders within a docx template remains incomplete

Benefits of Utilizing Object.create

What could be causing my Next.js application to not function properly on Safari?

Firefox browser fails to follow ng-href links

express.js and socket.io compatibility perplexity

What is the extent to which a scope variable will be accessible within the link function of Angular?

Output JSON data from PHP for use in Javascript

What is the best way to remove characters from a string that fall outside the a-z and 0-9 range?

What is the best approach for iterating through the creation of Objects?

A node module designed to efficiently convert multiple TIFF images into a single multipage TIFF document

How can we integrate information from a local JSON file onto our website?

Guide on integrating Select2 with webpack

What is the best way to outline the specifications for a component?