Issue with removing a row from a table in AngularJS

#AngularJS I'm having an issue with deleting rows from a table. Whenever I click the DELETE button on any row, it always deletes the first one instead of the clicked row. Can someone help me identify where I went wrong? Here's a snippet of the code:

            <tr id="riga" ng-repeat='x in cars'>
                <td class="dimensione">{{x.id}}</td>
                <td class="dimensione">{{x.targaauto}}</td>
                <td class="dimensione">{{x.datiintestatario}}</td>
                <td class="dimensione">{{x.marca}}</td>
                
                
                <td><button type="button" class='btn btn-danger btn' data-bs-toggle="modal" data-bs-target="#finestra">                 elimina</button></td>
            </tr>
                <div class="modal fade " id="finestra">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Attenzione</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <h5 class="modal-body">Sei sicuro di voler eliminare questo record?</h5>
                            </div>
                            <div class="modal-footer">
                            <button type="button" class="btn btn-primary" ng-click='rimuovi($index)' data-bs-                           dismiss="modal">OK</button>
                            <button type="submit" class="btn btn-secondary" data-bs-dismiss="modal">ANNULLA</button>
                            </div>
                        </div>
                    </div>
                </div>
          </table>
        </tbody>
      <script src="bootstrap.js"></script>
    </body>
</html>

Function RIMUOVI

$scope.rimuovi=function($index){
    $scope.cars.splice($index, 1)
}

Answer №1

When the button is pressed,

<button type="button" class='btn btn-danger btn' data-bs-toggle="modal" data-bs-target="#finestra">                 delete</button>

you must include

ng-click="verifyDelete($index)"

in your directive/controller to ensure that you have the correct row when confirming "Are you sure" in the modal.

Change ng-click='rimuovi($index)' to ng-click='rimuovi()' and utilize the saved value from verifyDelete.

Answer №2

One issue arises when attempting to retrieve the $index variable outside of the ng-repeat loop. One solution is to store it in a controller variable upon clicking delete, and subsequently display the modal.

Alternatively, you could pass the object and implement an array filter, but both options necessitate storing the value in a variable.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Invoking a function written in a TypeScript file from an HTML document

I'm new to HTML and Angular 2, currently grappling with calling a function inside a Typescript file from an HTML file. The stripped-down version of the Typescript file (home.ts) showcases a function like I have shown below: getConfigurations(sensor ...

What is the best way to achieve this Bootstrap design without copying the content?

Trying to achieve a specific Bootstrap layout without repeating content is my current challenge. Essentially, I aim to divide some content into 2 columns at the sm/md breakpoints and then switch to 3 columns for the lg breakpoint. The layout for sm/md bre ...

Send the user back to the homepage without the need to refresh the page

When the user clicks "Okay" in my window.prompt, the code below opens a new tab. Is there a way to direct the user to the home page without opening a new tab? if (window.confirm("Do you really want to leave?")) { window.open("./Tutoria ...

Combining jQuery with AngularJS for optimal web development outcomes?

As someone new to AngularJS, this project is challenging my knowledge of ng-repeat and controllers. Objective : My goal is to have the guitars appear when an option is selected from the drop-down menu and the button is clicked using ng-repeat. Currently, ...

Adding CSS styles on hover with Jquery append

Currently, I am attempting to use jQuery to append hover CSS styles to buttons. While I have been successful in applying the desired styles upon hovering over the button, the issue arises when the mouse moves away - the styles remain. Here's the code ...

Utilize JSON parsing to extract and store data into an object

I'm currently working on extracting specific objects from a parsed JSON stored within an object named data.json. var data = { json: '', text: '', welcome: '', q1: '', } let foo = await fetch(spr ...

Incorporate a captivating background image into your SVG design

Currently working with Snap.svg, my aim is to include a background image on a polygon shape. The specific polygon in question is outlined as follows: <svg id="test" height="600" width="600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...

"Utilizing jQuery to Send POST Requests on Rails - Dealing

Currently, I am running a JavaScript game from file:// and attempting to send a post request to a localhost Rails server in order to add a new high score. In my JavaScript: highScoresEntryView.keyHandlers = function() { var that = this; this.pa ...

Is there a way to transfer the data from a `HtmlService.createHtmlOutput()` to a variable after clicking the `submit` button event?

The code snippet below is encountering an issue where arrayStored is not defined in the submit function. I attempted to retrieve the value of arrayStored using the e.parameter method, but it did not work as expected. As a newcomer to HtmlService, I am cu ...

Make a gap between two buttons on my banner

How can I create a space of 0.5 cm between 2 buttons in my banner? I have been stuck on this for a while now. Do I need to modify my HTML blocks? https://i.sstatic.net/74yBh.png Below is the CSS code I am currently using: .myButtonRegister{ float: left ...

What could be causing my AJAX form to refresh the page upon submission?

I have been working on a basic Follow/Unfollow system, and although the functionality is working correctly in terms of inserting and deleting rows when following/unfollowing, I'm facing an issue where the page refreshes every time despite using e.prev ...

The navigation bar extends beyond the page's width

Currently, I am working on a website that was started by a former colleague. One issue I have noticed is that when the browser window's resolution reaches 768px or lower, the navigation transforms into a drop-down menu that appears wider than the page ...

gather data from a separate HTML document's form

Within an html file, users fill out a form and database queries are executed to display Google Maps locations. My objective is to store this data in a variable so that it can be used in another html file. This second html file will utilize the previous va ...

Tips for managing a virtual URL within an img tag

I have a situation where I need to protect the src value of an img tag to ensure server security. One recommendation I received is to use a virtual URL approach: In this scheme, the img tag references a virtual URL like /uploads/myuser/mypict.jpg which isn ...

Looping through data and converting it into a JSON format can

Can anyone help me figure out how to work through this JSON data using VUE? I'm having trouble accessing keys that v-for can't seem to reach: [ { "Lavandería": { "id": 1, "name": "Lavandería", "i ...

Preventing default behavior while redirecting an image drop in Angular

It seems like such a simple task, but for some reason I'm struggling to stop the default behavior of redirecting. The HTML : <div dropimg> </div> The DIRECTIVE: marketApp.directive('dropimg', function(){ return function($sco ...

issue with transparent html5

Here is the code snippet I am struggling with: function clear(){ context2D.clearRect(0, 0, canvas.width, canvas.height); } function drawCharacterRight(){ clear(); context2D.setTransform(1, 0.30, 1, -0.30, 10, 380);//having issues here c ...

Use Protractor to simulate Loss Connection by clearing LocalStorage in a Spec

Currently, I am utilizing the code window.localStorage.removeItem("name of localStorage variable you want to remove"); to eliminate two distinct localStorage Keys within a particular specification, and it is successfully removing them. Afterwards, I proce ...

Navigation bar text fails to display

Just starting out and trying to create a basic navigation bar, but I can't seem to get the links to show up. All that displays are the logo image and the hamburger icon. How can I make the links visible on the nav bar? Appreciate any help! <!DOCTYP ...

Applying Angular to Add a CSS Class

I am working with an Angular controller and have the following model on the scope: $scope.model = { subscriber: { email: '', name: '' }, notice: { text: '', type: '' } } My goal is to display a P tag when notic ...