Angularjs orderBy filter causing deletion of incorrect row

Question

Angularjs orderBy filter causing deletion of incorrect row

When creating a table with AngularJS, I utilized the orderBy filter. However, after implementing this filter, my delete function started removing rows unexpectedly without me clicking to delete.

Below is the code for the filter:

<tr class = "table-row isActive-{{task.active}} rowNumber-{{$index + 1}}" ng-repeat = "task in tasks | filter:search:strict | orderBy: '-priority':true">
    <td>
        <span class="delete-link">
            <input type="button" data-ng-click="removeRow($index)"/>
        </span>
    </td>
</tr>

And here is the delete function:

$scope.removeRow = function (productIndex) {
    $scope.tasks.splice(productIndex, 1);
    productIndex=0
};

It seems there may be an issue with my setup. What am I missing?

html css angularjs filter

Answer 1

Answer №1

When working with the $index, it's important to note that it represents the index in the rendered table, not the original array. Using orderBy: does not actually sort the original array; instead, it passes an ordered copy to ng-repeat.

Here is a potential solution: You have two options to resolve this issue:

You can choose to sort the original array and avoid using orderBy:
Instead of deleting items based on their index, you can identify them by their id or actual entry. For example:
```
$scope.removeRow = function (task) {
    $scope.tasks.splice($scope.tasks.indexOf(task), 1);
};
```

Answer 2

When working with the $index, it's important to note that it represents the index in the rendered table, not the original array. Using orderBy: does not actually sort the original array; instead, it passes an ordered copy to ng-repeat.

Here is a potential solution: You have two options to resolve this issue:

You can choose to sort the original array and avoid using orderBy:
Instead of deleting items based on their index, you can identify them by their id or actual entry. For example:
```
$scope.removeRow = function (task) {
    $scope.tasks.splice($scope.tasks.indexOf(task), 1);
};
```

Angularjs orderBy filter causing deletion of incorrect row

Answer №1

Similar questions

Conceal the value when selecting from the datalist

Personalize Bootstrap 5 slider for mobile (displaying multiple items without being arranged in a single row)

Issues with the Dropdown Menu

Ways to showcase JSON data with jQuery

What could be causing certain JS files to fail to load in HTML?

What is the most effective way to implement multiple ng-models within a single function?

Utilizing multiple interactive dialog boxes with content pulled from JSON source

Enhance User Experience with a Multi Step Form incorporating a Progress Bar, designed with jQuery and CSS3. Resolve issues with

"do not make use of inline labels in bootstrap version 4

Concealing Components using Angular's ng-change Feature

Choose an element on a webpage by leveraging the power of Selenium

Breaking or wrapping lines in Visual Studio Code

Struggling with Input Padding Across Different Browsers?

How can we filter a complex Django query to prioritize items at the end of the list based on time out, while also ordering those with the lowest time at the beginning?

Can the recaptcha icon be customized with a new hue?

JavaScript: Adding elements to an array is ineffective

How to make an image expand to fit the screen when clicked using HTML and CSS

Ways to trigger a function solely upon user input for field updates, excluding any automatic updates

What is the best way to achieve a horizontally compact layout in Bootstrap by centering the content?

Background image of block element overlaps with float element