Guide on including the angular value (id) in conjunction with repeating data-target for executing a function

I have the following code snippet.

Now, I am trying to pass a dynamic AngularJS variable, specifically the id of a repeating list.

The button in question is used for deactivation purposes, and upon clicking it, a confirmation box pops up. Upon confirming by clicking the appropriate button, a specific function should run with the passed id.

However, there seems to be an issue with sending the id along with the attributes data-target and data-toggle.

Within the code, I want to send {{key.id}} to the confirmation box.

<tr data-ng-repeat="key in services">
   <td>{{key.service}}</td>
   <td class="text-center">
      <button type="button" data-person="Zim" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#Deactivate">Deactivate</button>
   </td>
</tr>

  <!-- Modal Deactivate Starts-->

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Confirm Box</h4>
    </div>
    <div class="modal-body">
      <p>Do you want to Deactivate (servicename) service? </p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary" data-ng-click="deactivate(1)" data-dismiss="modal">Deactivate</button>
    </div>
  </div>
</div>


Any assistance would be greatly appreciated!

Answer №1

To prepare for future use, it is essential to create a variable as shown below:

HTML

<tr data-ng-repeat="key in services">
   <td>{{key.service}}</td>
   <td class="text-center">
      <button ng-click="selectedServiceId=key.id" type="button" data-person="Zim" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#Deactivate">Deactivate</button>
   </td>
</tr>
<!-- Modal Deactivate Starts-->

<!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Confirm Box</h4>
    </div>
    <div class="modal-body">
      <p>Do you want to Deactivate (servicename) service? </p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary" data-ng-click="deactivate(selectedServiceId)" data-dismiss="modal">Deactivate</button>
    </div>
  </div>
</div>

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

Retrieving data from a directive in an HTML table

Utilizing AngularJS, I am seeking a method to retrieve the value from an input located within a specific row in a table. Presented below is an input element. Upon clicking the "add" button, my objective is to extract the value corresponding to that partic ...

Using onDoubleClick with MUI TextField: A Quick Guide

Whenever the user double clicks the input field, I would like to automatically select the text. I have created a function for this specific action: export const selectText = ( event: React.MouseEvent<HTMLInputElement | HTMLTextAreaElement, MouseEvent& ...

npm unable to retrieve Meteor package

When I attempted to install meteorite using nodejs v0.10.22 and npm v1.3.14, the installation failed with the following error: $ npm install meteorite npm http GET https://registry.npmjs.org/meteorite npm http 304 https://registry.npmjs.org/meteorite npm ...

Troubleshooting $routeProvider issues in Angular

This is the content of my app.js: var cricketapp = angular.module('cricketapp', ['ngCookies']). config(['$routeProvider', function($routeProvider, $httpProvider, $cookies){ $routeProvider. when('/ ...

The effectiveness of the javascript widget is hindered by the absence of the meta viewport tag,

As I work on creating a widget to appear at the bottom of webpages, I've encountered a styling issue. The widget's display varies based on whether the webpage includes a specified meta viewport tag or not. <meta name="viewport" content="width ...

Steps for integrating external modules into an AngularJS single page application without using injector/modulerr

As a newcomer to AngularJS, I've been facing challenges when following tutorials and incorporating external modules. I have some concerns about avoiding injection errors. Q1. How can I resolve the injector/module issue? I used bower to install ' ...

The DOM element fails to load when utilizing the ng-view attribute

Recently, I have started working with AngularJS for my first web application and everything is running smoothly. However, I am now looking to integrate some charts using jQuery. The issue arises when trying to load a chart upon clicking on a menu item in ...

Explore a JSON structure and identify the parent key of a specific key:value pair

I may be new to coding, but I've hit a roadblock and can't seem to find the solution - despite numerous attempts on Google and StackOverflow. Behold, a JSON object: const json = { "catalog:aardvark": { "severity": "minor" }, ...

"Although disabled, input elements can still be focused on in Firefox browser

Illustrative example let userInput = document.createElement("input"); userInput.id = "user-input"; userInput.type = "number"; userInput.className = "user-number-input"; userInput.disabled = true; document.body.appendChild(userInput); .number-inp ...

The troubleshooting of a find method in Mongoose

Why is it necessary to use await twice when calling the model function, even though we already used await in the model itself: async function model() { return await data.find({}, '-_id -__v') } When I console.log await data.find({}, '-_id ...

What is the best way to implement two for loops in a Django template to handle sending and receiving chat messages efficiently?

I am attempting to implement sending and receiving messages in a Django template using a for loop. Here is my views function: @login_required def message_form(request, id, slug, user_id): user2 = request.user user_id = user_id user = get_objec ...

Discovering the wonders of Angular: fetching and utilizing data

Recently delved into the world of Angular and I've hit a roadblock. I'm struggling to grasp how Angular accesses data in the DOM. In all the examples I've come across, data is initialized within a controller: phonecatApp.controller(' ...

The React JSON Unhandled Rejection problem requires immediate attention

While working on a form in React 16, I reached out to a tutor for some guidance. However, when trying to mock the componentDidMount, I encountered an error that has left me puzzled. The app still runs fine, but I am curious as to why this error is occurrin ...

The technique of using Javascript x to escape characters is

I've come across a handful of other software programs that feature a similar construct: let str = '\x32\x20\x60\x78\x6e\x7a\x9c\x89'; As I experimented with the sequence of numbers and letters within ...

Is it possible to transfer an image from the client to the NodeJS server and store it locally within the server itself?

Is there a way for me to upload an image from the client side, send it via an HTTP request (POST) to the server (NodeJS), and save it internally on the server? Whether using Jquery, XMLHttpRequest, or a form, I continue to face the same issue where I can& ...

Opting for PHP over JSON for the instant search script output

Is there a way to modify my Google Instant style search script, written in jQuery, to retrieve results from a PHP script and output PHP-generated HTML instead of JSON? Below is the current code: $(document).ready(function(){ $("#search").keyup(functi ...

Creating a specialized pathway with variable inputs within the URL

As a Node beginner, I am facing a challenge with an Express exercise on dynamic routes. The task at hand is to create a route that can accept dynamic arguments in the URL path and respond with a quote from the respective author. Here's a snippet of th ...

Leveraging weather application programming interfaces

I am trying to set up a basic webpage that can display tide information from wunderground.com. However, for some reason I am not seeing any results on the page. I have included the load function in hopes of at least getting something to appear when the p ...

Updating a PlaneBufferGeometry in Three.js - Tips and Tricks

I'm currently working on implementing an ocean effect in my Three.js project. I found a helpful example on this website: https://codepen.io/RemiRuc/pen/gJMwOe?fbclid=IwAR2caTQL-AOPE2Gv6x4rzSWBrOmAh2j-raqesOO0XbYQAuSG37imbMszSis var params = { res : ...

The Great Gatsby - Unable to access property 'component---src-pages-index-jsx' due to its undefined nature

Attempting to transition my current ReactJS application with a WordPress backend to GatsbyJS has presented some challenges. As a newcomer to GatsbyJS, I diligently followed the setup instructions provided on their website for Windows 10. Despite a successf ...