Looping through alert items

Below is the code snippet I am working with:

<tr ng-repeat="sce in users">
  <td>
    <a href="/test/delete?id={{sce.id}}" 
        onclick="return confirm('You really want to delete'+ {{sce.name}} + 'from list');" >
           <span aria-hidden="true" class="glyphicon glyphicon-remove-circle"></span>
    </a>
  </td> 
</tr>

However, when I tried to click on the link to delete an item, no alert popped up.

The console showed the following error message: 

Error: [$compile:nodomevents] http://errors.angularjs.org/1.5.3/$compile/nodomevents
javascriptangularjs

Answer №1

Here is a possible solution:

<a href="/test/delete?id={{sce.id}}" 
    ng-click="showAlert($event, sce.name)" >

Implement the method in the controller like this:

$scope.showAlert = (event, name) => { 
   event.preventDefault(); 
   let result = confirm('Are you sure you want to delete '+ name + ' from the list?');
   if(result) {
     // Call a REST API to delete the item
   }
}

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

Discover the best places to master AJAX

Although I have come across some related questions here, none of them exactly match mine. I am aware of excellent resources like code-school and code-academy where you can improve your PHP and JS skills by coding directly on the website. However, I am wo ...

javascriptphpjqueryajax

Is there a way to bring in both a variable and a type from a single file in Typescript?

I have some interfaces and an enum being exported in my implementation file. // types/user.ts export enum LoginStatus { Initial = 0, Authorized = 1, NotAuthorized = 2, } export interface UserState { name: string; loginStatus: LoginStatus; }; ex ...

javascripttypescriptecmascript-6importinterface

How to import a template from a different webpage in AngularJS

I have a situation where I need to include a template from one HTML page into another because they are both lengthy and it's not practical to keep them on the same page. Therefore, I have decided to separate them for better organization. Here is an ov ...

javascripthtmlangularjstemplatesangularjs-ng-include

Styling the Menu Item with CSS

A graphic designer provided me with these elements to incorporate into the HTML design. Everything was going smoothly until I encountered the faint, uneven borders on the LI tags, especially when dealing with a list containing only five items. If anyone ...

javascriptjqueryhtmlcss

ExpressJS Node - .get switch to .route utilizing connect-ensure-login middleware

Considering that I have initially written a route using app.route: app.route('/word/:id') .get(word.getWord) .put(word.updateWord) .delete(word.deleteWord); Now, my aim is to modify the route by adding some middleware. While I am aw ...

javascriptnode.jsexpress

I'm not sure if I'm setting up the onkeypress listener correctly in AngularJS. Can someone confirm?

I'm trying to implement an onkeypress listener in my AngularJS application to capture all keypress events. Some questions I have: Is this the correct approach to achieve this functionality in AngularJS? Are there any ways to enhance the code to ali ...

angularjs

The jQuery .accordion() feature is not functioning properly due to the failure to load jQuery into the HTML document

I have exhaustively researched online and visited numerous resources, including Stack Overflow. Despite making countless adjustments to my code, it still refuses to function properly. The frustration is mounting as I struggle with jQuery - a technology tha ...

javascriptjqueryhtml

Synchronize React Hooks OnchangeORSync React Hooks On

Currently, I am in the process of transitioning my app from using a class model to utilizing hooks. In my code, there is a dropdown list where the onChange method performs the following function: filter(event) { this.setState({ selectedFilter: ...

javascriptreactjsreact-hooksstate

No data found in req.query object in ExpressJS

When I use http.post to send data from Angular to NodeJS, the req.query always comes back empty for me. Here is my server.js setup: const express = require('express'); const cors = require('cors'); const bodyParser = require('body ...

javascriptnode.jsangulartypescriptexpress

Issues with CreateJS chained animations failing to reach their intended target positions

Currently, I am tackling a project that involves using Three.js and CreateJS. However, I have encountered an issue with the animations when trying to move the same object multiple times. The initial animation fails to reach the target position, causing sub ...

javascriptthree.jstweencreate.js

Troubleshooting Checkbox Problems on Internet Explorer 6

In order to have checkboxes generated dynamically for a pop-up window utilizing AJAX, I am using Javascript. Furthermore, when a button is clicked, a function needs to be executed that checks all the checkboxes before the pop-up appears. The web pages bei ...

javascriptjspinternet-explorer-6checkbox

Stop GIFs from playing automatically

Looking for a solution to disable autoplay for animated gifs on my chat-site (php-based). Tried script below but out of ideas: <script> myVid=document.getElementsByTagName('img'); function disableAutoplay() { myVid.autoplay=false; m ...

javascriptonloadanimated-gifautoplay

Expanding AngularJS selection with JSON options

The functionality of this code functions properly even without the append method. However, when I attempt to use the append function, the select element is displayed but only displays the brackets {{option1.nomcarac}}. My goal is to successfully append an ...

angularjsjsonappend

Debugging Typescript code with line numbers

When opening the console in a browser, typically the javascript line number of a function call or error message is displayed. However, my current setup involves using TypeScript, which gets compiled to Javascript. I am wondering if there is a way to retr ...

javascriptbrowsertypescript

Inspecting Mapped Data in React using the Console

For some reason, I am unable to console.log any selection when using onClick in this React component. My goal is to achieve the following functionality. https://codesandbox.io/s/great-ardinghelli-6seko?file=/src/demoComponent.jsx I have successfully fetc ...

javascriptreactjsredux

Combine several elements in a single jQuery scrollreveal function

I am currently working on a webpage that utilizes the jQuery library plugin scrollreveal to gradually reveal different html elements when the page loads. The functionality of the code is working correctly at the moment, but I have noticed that there is a d ...

javascriptjqueryhtml

Is there a more efficient way to avoid duplicating JS blocks in multiple locations?

I'm currently working on a dual navigation menu/map feature where clicking on specific locations will display a new panel while hiding the previously viewed one. I've also added a map hover effect. You can check out my progress on JSFiddle. As I ...

javascriptjqueryaddclassremoveclass

Create a search preview in JavaScript that emphasizes key information and provides a condensed overview

I am currently working on incorporating a feature that generates a highlighted and condensed preview of a provided text. Below is the code snippet I have so far: <div> Search: <input value='vestibulum' disabled/> </div> < ...

javascriptreactjs

Troubleshooting: React Native and OneSignal notifications not showing up

Currently, I am developing an app in React Native and working on integrating notifications with OneSignal. Although I am able to efficiently receive notifications, I do not want them to be displayed on the screen when they are received. I came across a ` ...

javascriptnode.jsreact-nativenotificationsonesignal

Coloring a table in vue.js based on performance rankings

I'm facing an issue with sorting my data performance in vue js. Here is the script I have created so far: <template> <div> <div class="row"> <h2> Campaign Performance </h2> <table class=&q ...

javascripthtmlvue.js