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

I'm having trouble getting the JADE tag to render in Express script. Can anyone help me

Challenges faced with Vuetify's vertical and non-linear stepper components

Implementing a node.js application deployment with pm2 to ensure zero downtime

Guide to comparing 2 arrays and determining the quantity of identical elements

Utilizing AngularJS to dynamically load content within popups

Displaying and concealing a div based on the scroll position

The process of creating a mind map with blank spaces included

Exploring the Power of v-for in Nested Objects with Vue

My website using Dynamic Ajax technology is currently experiencing heavy traffic due to the number of getScript

What measures do websites such as yelp and urbandictionary implement to avoid multiple votes from unregistered users?

Implementing the @media rule using Javascript

I am attempting to access data through an ajax function, but it is not functioning correctly

React component failing to render even when event is triggered

Angular throwing "provider not found" error when attempting to inject service into controller

Performing numerous asynchronous MongoDB queries in Node.js

Animation issue in Material UI autocomplete label feature

Adjust the height of each child element to be half of the fixed height of the parent

Load the Angular controller only after the service successfully fetches the Swagger API file

How to implement an instance method within a Typescript class for a Node.js application

Utilizing the dollar shorthand for jQuery in conjunction with Selenium