Troubleshoot: Trouble with selecting the clicked item in AngularJS when using ng-repeat

Is there a way to only delete the selected item from my ng-repeat list instead of deleting all items at once? I can currently delete all items using ng-repeat, but I want to be able to delete just the clicked item. How can I achieve this?

https://i.stack.imgur.com/4isYa.png

Please see the markup for the modal below

<!doctype html>
<html lang="en" ng-app="app">

  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Scope List</title>

    ...

</html>

You can find the controller code here:

angular.module('app', ['firebase', 'ngMaterial', 'ngMessages'])
.controller('appCtrl', function($scope, $firebase) 
{
/* Firebase Database Connect */

...
  
});

Answer №1

Full disclosure: I do not have knowledge of the firebase system you are utilizing. Nevertheless, achieving your goal in angular code should be simple. Within your HTML's ng-repeat section, include a delete function and pass the current iterator's reference. For example:

<div ng-repeat="value in DB">
    <div>{{value}}></div><button ng-click="delete(value)"></button>
</div>

Without seeing your repeater code, this is just an assumption for the delete functionality. However, by following this approach, you'll obtain a specific instance to use for alert messages.

If things are still unclear, please share your repeater code.

Additional explanation for OP:

You have a button triggering a model like so:

<md-button class="md-raised md-warn" type="button" data-toggle="modal" data-target="#deleteModal"><i class="material-icons">delete_forever</i></md-button> 

In your modal, you have this repeater:

 <div class="modal-body">

                <h4 class="text-center" ng-repeat="value in DB">Are you sure you want to delete <strong><em>{{value.name}}</em></strong>?</h4>

            </div>

The issue lies in repeating all values from your DB using ng-repeat="value in DB". Instead, retrieve the clicked value from your button. You can achieve this by adding a click listener on your md-button, like so:

  <md-button class="md-raised md-warn" type="button" data-toggle="modal" data-target="#deleteModal" ng-click="getValueToDelete(value)"><i class="material-icons">delete_forever</i></md-button>

This function captures the value, which you can then store somewhere in your scope. In this case, it is stored in rootScope, but consider using a different method.

$scope.getValueToDelete = function(value){
   $rootScope.valueToDelete = value
}

In your modal, only utilize this stored value instead of ng-repeat="value in DB". It should look something like this:

<div class="modal-body">

                <h4 class="text-center">Are you sure you want to delete <strong><em>{{valueToDelete.name}}</em></strong>?</h4>

            </div>

By implementing this method, you will display only one value in your modal. Hopefully, this clarifies things for you now.

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

Update the value after verifying the element

I am trying to retrieve data from my database and update the values when an element is clicked (accepting user posts). The code I have written seems to work, but I encounter an error stating that props.actions is not a function when clicking on an element. ...

Adonis 5 and Vue encountering the error message 'E_ROUTE_NOT_FOUND'

I am currently working on a project using Adonis v5 as the backend and Vue 2 as the frontend. I have encountered an issue where, after building the Vue frontend into the public Adonis folder, accessing a specific route directly in the browser results in an ...

How to define an index signature in Typescript that includes both mandatory and optional keys

I am on a quest to discover a more refined approach for creating a type that permits certain keys of its index signature to be optional. Perhaps this is a scenario where generics would shine, but I have yet to unlock the solution. At present, my construc ...

In JavaScript, the task involves filtering through multiple arrays of objects to calculate the average value based on the contract number

Every object in the Array contains a contractNumber, but with repeated values. I am attempting to determine the average value of each unique contractNumber. var vendorArr=[{ "contractNumber":5258, "monthId":0, "value":2}, { ...

Restrict the duplication of div elements with JQuery

Here is the structure I'm working with: <div class="checkmark-outer"> <div class="checkmark-33"> <div class="fa-stack fa-1x checkmark-icon"> <i class="fa fa-circle fa-stack-2x icon-background"></i> ...

Dynamic image swapping using JSON key in Angular

Trying to display different icons based on a property that contains specific words. If the property includes "Health Care" or "Health Care .....", I want to show one image, otherwise another. I've tried using ng-show but my syntax seems off. Any sugge ...

Display alternative text dynamically

Trying to gain a deeper understanding of state in react, this is a perfect example to me. When I say dynamic, I mean displaying the output below instantly as it is entered in the form. class Demo extends Component { constructor(props) { super ...

Activating gzip compression using fetch.js

I am utilizing fetch.js (https://github.com/github/fetch) to transmit a rather substantial JSON object to the backend. The size of the JSON is significant due to it containing an SVG image string. My question is whether fetch.js applies gzip compression a ...

Specialized express Validator for 2 particular fields

I currently have 2 custom validators set up for the fields email and phone. check('phone') .not() .isEmpty() .withMessage('Phone should not be empty') .custom(async phone => { const phoneCheck = await ...

JavaScript Drag Events in Microsoft Edge (Including IE)

My drag event is functioning properly in Chrome, Safari, Firefox, and Opera. However, I encountered an error when running it on Microsoft Edge and IE: SCRIPT438: Object doesn't support property or method 'setDragImage' Below is the code sn ...

What is the best way to include a disable option or default option in a select box?

I am incorporating react material in react using the select component. My goal is to include a first disabled option that says "please select item." This is how it's currently implemented in HTML: <select name="tagging"> <option sel ...

Should the article ID be sent to the ajax file, or should the ajax file retrieve the article ID directly? This dilemma arises in a

I am trying to pass the current article ID to an ajax file. The URL of the ajax file is something like www.web.com/plugins/system/ajax.php, so using JRequest::getInt(id) always returns 0 integer. However, in a non-ajax file, I can get the ID the same way. ...

Stopping the execution of jQuery().load()

The .load() feature in the jQuery library allows users to selectively load elements from another page, based on specific criteria. I am curious to know if it's feasible to stop or cancel the loading process once initiated. In our program, users can e ...

Enable users to choose multiple rows at once or alternatively choose by checking the checkboxes

When using Tabulator with the setting table.selectable = true, any cell click selects the row. However, I specifically want rows to be selected only via checkboxes, so I set selectable = false. The issue now is that the checkboxes behave like a radio butt ...

Receiving Output from an AJAX Request

My PHP script is set up to verify the validity of an email address, returning either true or false. I've been attempting to use AJAX to call this PHP file and pass the result back to a Javascript function, but unfortunately, I haven't been succes ...

What is the relationship between $.when, apply(), and $.done() within the scope of this function?

I recently received this function from a helpful SO user that allows for returning a variable number of jQuery $.get() requests. The initial part seems pretty straightforward, but I am struggling to understand how $.when(), apply(), and $.done() are inte ...

How to update a value within a deeply nested array in MongoDB and then sort the data

In my document, I have a list of timestamps that are sorted by time: { _id: '1', timestamps: [ { id: '589b32cf-28b3-4a25-8fd1-5e4f86682199', time: '2022-04-13T19:00:00.122Z' }, { id: '781 ...

Serializing intricate objects using JavaScript

I'm curious if there are any options outside of npm for serializing complex JavaScript objects into a string, including functions and regex. I've found a few libraries that can do this, but they all seem to depend on npm. Are there any good seri ...

Looking for a custom JavaScript color wheel with advanced features?

In search of a javascript color picker/wheel that allows users to easily select colors for our paint shop. Once the color is selected, it should automatically add the color value to the shopping cart. Our online store is operated using PrestaShop, so we ...

Having trouble retrieving a value from a .JSON file (likely related to a path issue)

My React component is connected to an API that returns data: class Item extends Component { constructor(props) { super(props); this.state = { output: {} } } componentDidMount() { fetch('http://localhost:3005/products/157963') ...