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

All You Need to Know About Jquery's Selector for Nested Elements

Could someone clarify if the Jquery Statement $(selecterA:not(selectorB), elementA) means "return those elements that match selectorA but not selectorB within elementA"? I am confused by a simple case in Fiddle#1, where both output statements using .length ...

Could an element's loading be postponed on the initial page a user lands on?

One of my clients has requested a live chat system to be added to their website. I am fully capable of implementing it, and it is included through a script tag. Additionally, they have asked for a slight delay before the chat system loads in. My initial t ...

The error message "Each item within a list must be assigned a unique 'key' prop" is being displayed

At the moment, I'm immersed in a project that utilizes React, Next.js, and Ant-Design. However, during the development process, I encountered an error due to the absence of a unique key like so: Here's the detailed log of the error: Warning: Ea ...

The JSON.Parse function in Google Apps Script is leading to a 'server connection error' message during debugging

I'm not a professional developer, but I do code occasionally. Currently, I am working on some Apps Script code to interact with an API and store the data in SQL. Most of it is working fine, but I have encountered an issue while debugging in the Apps S ...

What could be causing my date to not format correctly as intended?

I have a date stored in my database table that appears like this: "2017-12-07 14:42:38.0611177 +00:00" When I try to format it in my HTML using this code: <td>{{ note.CreatedAt | date : "MMM d, y" }}</td> I anticipate the date to be display ...

What is the best way to generate an extensive table with HTML and AngularJS?

I am looking to implement an expandable table feature where a single header with a plus icon can be clicked to reveal the child rows beneath it. Currently, I have been able to achieve this functionality. However, I am facing an issue where the child rows ...

Utilize JavaScript in conjunction with encfs for enhanced encryption capabilities

I am attempting to access an encfs filesystem using JavaScript, but am struggling to understand the correct approach. I am utilizing the CryptoJS library for this task. The .ecnfs6.xml file contains standard settings and uses the password "123456": < ...

Obtain a compilation of users who have expressed their reaction to a message with a specific emoji on Discord

Check out this Discord.js code snippet for a Discord bot: client.channels.fetch('channelID here').then(function (channel) { channel.messages.fetch('messageID here').then(function (message) { console.log(message.reactions.cache.get(&a ...

Retrieving data from a stored procedure with XSJS and storing it in a variable

I am currently facing a situation where I need to pass a session user as a parameter to a stored procedure in order to retrieve a receiver value. This receiver value needs to be stored in a variable so that I can use it in another function within an xsjs f ...

Obtain a string in JSON format upon clicking in Angular 2

I am working on extracting the title from a json response using a click event. Currently, I can retrieve all the titles when the button is clicked, but I am looking for a way to obtain a specific title based on the button or a href that the user has clicke ...

Arrangement of watch attachment and $timeout binding

I recently encountered a component code that sets the HTML content using $scope.htmlContent = $sce.trustAsHtml(content). Subsequently, it calls a function within a $timeout to search for an element inside that content using $element.find('.stuff' ...

Converting SVG to PNG image directly in the browser (compatible with all browsers, including Internet Explorer)

I am currently working with Highcharts and I have a need to convert all the charts displayed on the webpage into images so that I can send them to my server for merging with a master export Excel file. The Excel file already contains some tables and pivot ...

Error encountered in AngularJS $cookieStore: SyntaxError - Unexpected character found during JSON parsing

Any thoughts on why I keep encountering an error Error: Unexpected character in JSON.parse() when running this code console.log($cookieStore.get('XSRF-TOKEN')); The value of the cookie is kscJcqrDYSMdZtBleuq8yUrB ? UPGRADE NODE CODE var c ...

Embed JavaScript code within the Material-UI components

I am working with the material-ui ListItemText: <ListItemText primary={<div> <Table className={classes.table}> <TableRow> <TableCell width="40">{item.issue_state}</TableCell> <TableCell width="40">{ ...

Using jQuery, you can easily modify the color of a TD cell by applying the css properties assigned to the div element

I am attempting to implement a jQuery script that will execute upon the loading of the document. The objective is for the script to retrieve the background color of a div located within a td cell and apply it as the background color for the respective td c ...

Deleting empty tags in an HTML h1 element with JavaScript

Is there a way to use JavaScript to remove empty h1 tags only? <h1>Hello World!</h1> <p>Lorem ipsum dolor sit amet</p> <h1></h1> <p>consectetur adipiscing elit.</p> <h1></h1> <p>Sed do ...

Refresh a specific div element within an HTML file when the AJAX call is successful

After uploading the image, I want it to be displayed right away. To achieve this, I am looking to refresh the div with id="imagecontainer" within the success function of my ajax call. However, I would prefer not to rely on ("$id").load("href") as it does ...

Guide to displaying or concealing the header using PHP

Once the add button is clicked, the text should be hidden and the form should be displayed. Check out my code below: <h2 style="font-size: 2em; margin-bottom: 0.75em; margin-left: -1%;">Specify Co-Owners for self occupied property</h2> <div ...

Challenges with fetching data from APIs in NextJs

I am currently working on a basic NextJs TypeScript application with the app router. The following code is functioning correctly: export default async function Page() { const res = await fetch("https://api.github.com/repos/vercel/next.js"); ...

Creating a render function that includes the img.src parameter requires careful thought and consideration

I am currently working on a dilemma where I need to dynamically adjust the height and width of an image in my render() function every time there is a state change. Here is the code snippet: render() { const imageURL = photos[this.state.currentImage]. ...