"Obtaining table row values by clicking a button in Angularjs - a step-by-step guide

I am seeking guidance on extracting the table row values of the selected row in the provided Plunkr. When a row is selected using the checkbox in the table and the update button is clicked, I require the row ID, name, and values. You can access the Plunkr here - https://plnkr.co/edit/9wWxczEH22aG71RN3B0Q?p=preview

html code:
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <table style="width:100%;overflow: scroll; border: 2px solid #AAA; ">
        <thead style="border-bottom: 1px solid #AAA">
            <tr>

                <th style="width:50%">&nbsp;&nbsp;<input type='checkbox'/>&nbsp;&nbsp; catalog</th>
                <th style="width:25%">currentVersion</th>
                <th style="width:25%">new Version</th>
            </tr>
        </thead>
        <tbody style="color: #007db8;">
            <tr id='1' name='MT' >
                <td style="width:50%"> 
                    &nbsp;&nbsp;<input type='checkbox' />&nbsp;&nbsp;Multiple
                </td>
                <td style="width:25%">1.2</td>
                <td style="width:25%">1.3</td>
            </tr>
        </tbody>
    </table>
    <button style="font-size: 11px;" type="button" class="btn btn-primary" >Update</button>
  </body>

</html>
javascriptcssangularjshtml

Answer №1

If you're looking for a way to retrieve the value of each row, one approach is to utilize ng-repeat and ng-model within your AngularJS application.

angular.module('example', [])
.controller('exampleCtrl', function ($scope) {
  $scope.selectedItems = {};
  $scope.dummyModel = {};
  $scope.items = [{
    id: 1,
    name: 'test',
    catalog: 'Multiple',
    currentVersion: '1.2',
    newVersion: '1.3',
  }, {
    id: 2,
    name: 'test',
    catalog: 'Multiple',
    currentVersion: '1.2',
    newVersion: '1.3',
  }, {
    id: 3,
    name: 'test',
    catalog: 'Multiple',
    currentVersion: '1.2',
    newVersion: '1.3',
  }];
  
  $scope.selectItem = function (item) {
    // Handle selection logic based on checkbox state
    if ($scope.dummyModel[item.id]) {
      $scope.selectedItems[item.id] = item;
    } else {
      delete $scope.selectedItems[item.id];
    }
  }
  
  $scope.updateSelection = function () {
    console.log($scope.selectedItems);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="example" ng-controller="exampleCtrl">
    <table style="width:100%;overflow: scroll; border: 2px solid #AAA; ">
        <thead style="border-bottom: 1px solid #AAA">
            <tr>
                
                <th style="width:50%">&nbsp;&nbsp;<input type='checkbox'/>&nbsp;&nbsp; catalog</th>
                <th style="width:25%">currentVersion</th>
                <th style="width:25%">new Version</th>
            </tr>
        </thead>
        <tbody style="color: #007db8;">
            <tr ng-repeat="item in items" ng-attr-id="item.id">
                <td style="width:50%"> 
                    &nbsp;&nbsp;<input type='checkbox' ng-model="dummyModel[item.id]" ng-change="selectItem(item)"/>&nbsp;&nbsp;{{ item.catalog }}
                </td>
                <td style="width:25%">{{ item.currentVersion }}</td>
                <td style="width:25%">{{ item.newVersion }}</td>
            </tr>
        </tbody>
    </table>
    <button style="font-size: 11px;" type="button" class="btn btn-primary" ng-click="updateSelection()" >Update Selection</button>
  </body>

Answer №2

Utilize the ng-checked event to capture check events. If you need to handle both checked and unchecked events, consider using ng-click

By doing this, you can access the input element. You can then use element.parent.parent to retrieve the td or tr elements along with their values.

function performAction(element){

  var parent=element.parent.parent;
  // carry out an action

}

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

Storing multiple email addresses in an array using an HTML input element

I have a small React Bootstrap form where I am trying to save multiple email addresses entered by the user into an array. However, when I use onChange={()=> setEmails(e.target.value as any} it stores them in string format like this --> [email p ...

javascripthtmlreactjstypescript

"Transferring cart controller information to the checkout controller: techniques and best practices

As a beginner using MySQL as a backend to store data, I am struggling with passing product_id, quantity, and price to the checkout page. Can someone provide guidance on how to store these data efficiently? Cart Service .factory('sharedCartService ...

angularjs

Discover how to retrieve service response data from an API and populate it into the Select Option with Angular 2

Api.services.ts getListOfNames() { return this.http.get(this.BaseURL + 'welcome/getnama') .pipe(map(response => { return response; })); } After making the API call, I receive the following resp ...

javascriptangulartypescript

Steps for showing personalized validation error messages in Angular 7

Is there a way to highlight the input field of a form with a red border and display the message Password is invalid when a user types in a password that does not match the set password? I have managed to see the red border indicating an error when I enter ...

javascriptangular

MTG Life counter. Display fluctuations in count

I am currently working on a fun project creating an MTG (Magic The Gathering) life tracker, even though the code is quite messy. Despite its flaws, it still gets the job done. Click here to view the MTG life tracker https://i.stack.imgur.com/Su17J.png ...

javascripthtmljquerycssecmascript-6

What are the reasons behind the lack of clarity in the cache for an ajax request

I am encountering an issue with my external JavaScript file that is supposed to run the home.php file using an Ajax request. Despite adding a random function to the URL to clear the cache, I am still facing issues with caching in my code. Below is the Ja ...

javascriptphpajaxcaching

Navigating to a precise location on a webpage with React.js

I want to implement a straightforward action where the page automatically scrolls to a specific position upon loading. However, my attempts to execute this action have been unsuccessful so far. Is there an alternative method to achieve this in a React ap ...

javascriptreactjsnext.js

I'm encountering an error while trying to read this HTML file. Can anyone provide guidance on resolving this issue?

website = 'https://www.fdic.gov/bank/individual/failed/banklist.html' dataframes = pd.read_html(website) Error: Unable to import data due to missing lxml module. Please make sure it is installed. ...

pythonhtmljupyter-notebooklxml

Effortlessly glide through columns in Bootstrap 4

On my page, I have three columns with a class of col-md-6. Initially, only box1 and box2 are visible. When the user clicks on the button labeled BTN, I want to display box2 and box3, smoothly transitioning all boxes to the left. I attempted using jQuery ...

jqueryhtmlcssbootstrap-4css-animations

"Leaflet automatically refreshes tile cache when zooming in or out

Currently, I'm facing an issue regarding the tile cache in leaflet. If I move from point A to point B, and examine the tiles in between, they are cached without any problems. However, if I go from A to B, zoom in and out, and then return to point A, ...

javascriptjquerycachingzoomingleaflet

Can you provide a guide on how to retrieve an HTML file using JSON?

There is a problem with fetching files in different formats. Specifically, I want to retrieve an HTML file that needs to be embedded in an iFrame. Currently, my AJAX request only retrieves SWF files. Is there a way to call and fetch the HTML file instead ...

javascriptjqueryhtmlajaxjson

Is it advisable to run this function asynchronously on the server?

I have limited experience with node js, but I am working on a project similar to how Uber shows their cars in real time on a map. Currently, I have an SQL database containing data for numerous cars along with their GPS locations. The client sends their GP ...

javascriptmysqlnode.jslogic

AngularJS search suggestions feature is malfunctioning

I've been attempting to run the following code on my computer, but I'm unable to achieve the desired result. Interestingly, when I ran the same code on JS Fiddler, it worked perfectly. Here is my index.html: <div ng-app="myApp" ng-controller ...

angularjsjsonangularjs-scopeangularjs-ng-repeat

Why is it that methods lose their binding when they are returned from a ternary operator?

class TestClass { constructor() { this.prop = 5; } MethA() { console.log(this); console.log(this.prop); } MethB() { (true ? this.MethA : null)(); } } Test = new TestClass(); Test.MethB(); What is the ...

javascript

Guide to passing the parent state as a prop to a child component and enabling the child to modify the state

I have a situation where my parent component holds 4 buttons to set a payment state, and I need to pass this state to a text field child component. Additionally, I want the text field to be editable so that the state can also be modified through it. My att ...

javascriptreactjsmaterial-uiformikyup

Utilize ajax to send both images and text simultaneously

I'm utilizing javascript's 'formData' to transmit image files through ajax. Is there a way to append extra data to formData, like a text string? JS: $("#post-image").on("click", function(){ $.ajax({ url: "../../build/ajaxe ...

javascriptajaxjquerymultipartform-data

Patience is key as you wait for the observable to finish

My methods have dependencies where one method needs to complete before the next can be called. process1(data: string) : Observable<string> { this.dataservice.process(data).subscribe( (response) => { return response. ...

javascriptangulartypescriptrxjsobservable

Guide to shutting down Bootstrap 5 modal using React

Incorporating bootstrap 5 with react in my project without installation, I am utilizing CDN links to integrate bootstrap elements into the DOM. The challenge arises when attempting to close the bootstrap modal after data is updated. Despite trying to uti ...

javascriptreactjsmodal-dialogbootstrap-5react-dom

Enhancing Next.js Images with Custom CSS Styles

I am working with a Next.js component: import styles from '../styles/Navbar.module.css' import Image from 'next/image' export const Navbar = () => { <div> <Image className={styles["navbar-home-icon"]} ...

javascripthtmlreactjsnext.js

The Issue of Missing HTML Registration Form Data in Django

My configurations in demo\urls.py, user\urls.py, views.py, and HTML form seem to be set up correctly. However, upon pressing the submit button on the HTML form, I encounter a "File Not Found" error. Even after seeking assistance from ChatGPT, fol ...

htmldjangoformsdjango-rest-frameworkdjango-views