Retrieving the value of a duplicated button in AngularJS

I have implemented a basic HTML table using AngularJS to display data for each item in my "names" array. Each item represents an object with various attributes such as Name, id, etc. Along with each row in the table, I have included a button. However, I am unsure of how to determine which button has been pressed and retrieve its associated value. For instance, if there is a row displaying Name: Michael, id: 1, and a corresponding button, when that button is clicked, I would like to capture the id: 1 into a variable within my app controller.

HTML code

<ul>
    <li ng-repeat="x in names | filter: name">
        <div id="kartei">{{ x.artikelName }} {{ x.artikelBeschreibung }} {{ x.artikelPreis }} {{ x.angebotNummer }} {{ x.kundenMail }}</div>

        <div id="Kaufen" ng-app="myApp" ng-controller="angebotKaufen">
            <button ng-model="kaufbutton" type="button" ng-click="submit()" ng-value="{{ x.angebotNummer }}">purchase {{ x.angebotNummer }}</button>
        </div>
    </li>
</ul>

JavaScript

app.controller("angebotKaufen", function($scope){
$scope.submit = function(){
    console.log($scope.kaufbutton);
    // Logic for purchasing
    // Retrieve id information from database
    // Redirect to purchase page     
};

Answer №1

It's advisable to pass the purchase button through the function.

HTML

<ul >
  <li ng-repeat="x in names | filter:name">
  <div id="kartei">{{ x.artikelName }}{{ x.artikelBeschreibung  }}{{ x.artikelPreis  }}{{ x.angebotNummer  }}{{ x.kundenMail  }}</div>

<div id="Kaufen" ng-app="myApp" ng-controller="angebotKaufen">
<button ng-model="kaufbutton" type="button" ng-click="submit($event, kaufbutton)" ng-value="{{ x.angebotNummer }}" >buy {{ x.angebotNummer }}</button>
</div>


</div>
</li>
</ul>

Code

app.controller("angebotKaufen", function($scope, $location){
    $scope.submit = function($event, kaufbutton){
        $event.preventDefault();//just in case you need this
        console.log(kaufbutton);
        // Clicking on Buy
        // Receive ID info from the database
        // Redirect to purchase page      
    }; 


});

Answer №2

When working with a controller that includes functions named clients and submit:

$scope.submit = function(id) {
    console.log(id);
}

$scope.clients = [{
    'name': 'Michael',
    'id': 1
}, {
    'name': 'Karl',
    'id': 2
}];

We can easily pass the id as an argument in the submit function:

<div ng-repeat="client in clients">
    {{client.name}} {{client.id}} <button ng-click="submit(client.id)">Submit</button>
</div>

For a practical example, you can view the code snippet at: http://jsfiddle.net/quk7t660/

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

Switch between showing the Font Awesome TitleText and its associated Class with a single click

Can the value of the title attribute for <i> be toggled? For example, if the title is set to <i title="Favorite This Post" class="fa fa-star-o" aria-hidden="true"> within <div class="postoption"> I would like to toggle both the title te ...

Using indexOf() in JavaScript

Recently, I delved into learning JavaScript through the guide of Beginning Javascript 5th edition. However, I am stumped by a perplexing JavaScript script function getCookieValue(name) { var value = document.cookie; var cookieStartsAt = value.indexOf(" " ...

What is the process for generating a JavaScript File open dialog box that can display files stored on a server?

On my website, I want clients to be able to access files stored on the server. I need to implement a file open dialog box that displays files available on the server, similar to this code: <input type="file" id="select_file" onchange="openfunction();"& ...

Encountering a problem when trying to connect an array from the server to the HTML portion using AngularJS in combination with Asp

Encountering errors on chrome, I suspect the html loading faster than the array causing synchronization issues. Received an array from the Server. Utilized the array in the html section to bind array items to Paths, ids, and tag elements. The issue aris ...

Attempting to showcase JSON response within an HTML page using JavaScript

Can anyone help me troubleshoot my code for displaying JSON data on a web page? Here's what I have so far: <button type="submit" onclick="javascript:send()">call</button> <div id="div"></div> <script type="text/javascript ...

Having difficulty retrieving values while using async-await

Utilizing the code below has been successful for me. I managed to retrieve the data in the spread (then), returning a http200 response. Promise.all([ axios({ method: 'post', url: 'https://oauth2.-arch.mand.com/oauth2/token&a ...

Issue: Failed to locate module @angular/core

When attempting to run an Angular 4 application, I consistently encounter the following error: ERROR in Could not resolve module @angular/core There are no additional errors present. There are no dependency issues whatsoever as @angular/core is located i ...

Comparison of getComputedStyle() and cssText functionality between Internet Explorer and Firefox

Take a look at this example to see the issue in action. I'm attempting to access the cssText property of a <div> using window.getComputedStyle(element) (which provides a CSSStyleDeclaration object). While this works smoothly in Chrome, it' ...

Identifying the conclusion of a folder being dropped in vanilla JavaScript

I am working on determining when a directory tree has been completely traversed after being dropped onto a page. My goal is to identify the point at which the next process can begin once the entire folder and its sub-directories have been processed by the ...

AngularJS allows you to hide an accordion if its sub-elements are filtered out

I have dynamically created an accordion using Angular. Here is the code snippet: <input type="text" class="form-control pull-left" ng-model="searchSingleField.title"> <accordion-group ng-repeat="category in categories"> <li ng-repeat ...

Troubleshooting issue with ng-hide in AngularJS when using multiple filters

I'm struggling to implement two filters using ng-hide. Check out this fiddle where I've showcased the issue: http://jsfiddle.net/czPf6/2/ I have a piece of code that dynamically selects which filter to use based on input values from an input box ...

What is the best way to display data from multiple lists that are returned by a JSON function?

List of My Models: ClassAllocate: Contains Id, DepartmentId, CourseId, RoomId, DayId, StartTime, EndTime Course: Consists of Id, CourseCode, CourseName, DepartmentId Room: Includes Id, RoomNumber Day: Has Id and DayName My goal is to search for course ...

"The position of the Textbox shifts suddenly following the input of text

One interesting quirk I've noticed in my HTML code is that a text box with a jQuery button attached to it seems to shift down by about 4 pixels when the user enters text and then moves away from the box using the tab key or mouse. <div class=&apos ...

The requested page for angular-in-memory-web-api could not be located within the Angular 4.2.2 CLI web-api functionality

Currently, I am delving into the Angular framework (specifically version 4.2.2) and going through the Tour of Heroes tutorial. As I progressed to the HTTP section, the tutorial introduced the use of angular-in-memory-web-api to simulate a web api server. ...

What is the best way to update a targeted component in React when triggered by an event handler?

Your goal may seem straightforward, but getting a reference to a specific component using this is proving to be tricky. Here we have our App.js file: import React, { Component } from 'react'; import CoolBox from './coolBox.js'; import ...

Searching for and modifying a specific subdocument in Mongoose

I am currently working with the schema for a document called Folder: var permissionSchema = new Schema({ role: { type: String }, create_folders: { type: Boolean }, create_contents: { type: Boolean } }); var folderSchema = new Schema({ nam ...

Is it possible to conceal the dates from past months in the datepicker plugin?

Currently, I am utilizing a datepicker tool from jQuery UI and adjusting its CSS to suit my requirements. My goal now is to hide any dates that are not currently active, specifically those displayed from other months. I am unsure if this can be achieved ...

Vue.js does not seem to be properly assigning attributes that are declared within the data object array

Trying to get a hang of vue.js and looking to create dynamic product cards using it: This is the snippet from my HTML file: <div id="app"> <card v-for="products in product" :productname="product.productname"></card> </div> Here&a ...

Is it possible to retrieve the DOM object using a specific $$hashKey identifier?

Within my <table>, each row contains multiple input type="text" fields. I am trying to figure out a way to validate if any of these input fields are empty, and if so, add a specific CSS class that will display an error message. The only thing availab ...

Having trouble loading CSS and JavaScript files in CodeIgniter version 3.0.4?

I am facing an issue with loading my CSS and JS files in the view file. I have already added them to the folder and set the base URL. These codes were working fine with a project I previously did on an older version of CodeIgniter. What could be causing ...