Upon clicking the submit button, retrieve all the table rows that have been selected

After populating a table with data from a CSV file, users have the ability to select specific rows. When they click submit, all selected row data is sent to a webservice.

Although I have successfully implemented AngularJS(v1.6) to populate the data and retrieve individual row data on checkbox click, I am facing an issue where the .checked property returns false if not all rows are selected. Consequently, unchecking a row does not remove its value as expected.

Below is the code snippet:

$scope.getRow = function(n,item){
        var selectedRows = [];
        console.log(item);
        console.log(document.getElementById("checkboxValue").checked);
        //will push all selected items to selectedRows
    }
<table id="customers">
    <tr>
        <th></th>
        <th ng-repeat="(key,data) in tableData[0]">{{key}}</th>
    </tr>
    <tr ng-repeat="item in tableData">
        <td><input type="checkbox" id="checkboxValue" ng-          click="getRow(this,item)" /> </td>
        <td ng-repeat="(key,data) in item"> {{data}}</td>
     </tr>
</table>

<button ng-click="executeQuery()">Execute</button>

The table will look like https://i.sstatic.net/BCaug.png

Answer №1

To enhance the functionality of your checkboxes, consider incorporating ng-model.

<input type="checkbox" ng-model="item.checked"/>

Instead of constantly updating selectedRows with each checkbox click, optimize by adding checked values to selectedRows upon submit function execution via iteration through tableData.

var selectedRows = [];

angular.forEach($scope.tableData, function(value, key) {
    if(value.checked){
        selectedRows.push(value);
    }
});

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

Translating from a higher-level programming language to a lower-level programming language

Is compilation effectively the transformation of high-level programming languages (HLL) into machine code or low-level language? If so, why is TypeScript (a HLL) compiled to JavaScript (also a HLL) instead of being compiled to a low-level language? ...

Using Angular and Jasmine: techniques for simulating a service that provides a promise

In my AngularJS application, I have a controller called MenuCtrl that utilizes a service provided by "$mdSidenav" from Angular Material. This service is created using a factory method. angular.module('leopDirective', []) .controller('Me ...

Issue with Angular 7: In a ReactiveForm, mat-select does not allow setting a default option without using ngModel

I have a Angular 7 app where I am implementing some reactive forms. The initialization of my reactive form looks like this: private initFormConfig() { return this.formBuilder.group({ modeTransfert: [''], modeChiffrement: [' ...

Learning AngularJS: The creation of a module in action

Exploring the topic: http://www.w3schools.com/angular/angular_modules.asp The concept of creating a module in AngularJS is introduced using the angular.module function. However, it's worth noting that the module is already declared within the exist ...

angular interceptor is not disapproved

$resource makes an API call. If it receives a certain flag, the request will fall into the .catch() section of $resource('api/').get(...).$promise.catch(); My interceptor doesn't trigger that call. It always calls .then regardless. Interce ...

The combination of Masonry, FlexSlider, and endless scrolling functionality creates a

I am currently using the Masonry layout and implementing infinite scroll functionality through a jQuery plugin. Within this content, I have various FlexSlider slideshows. Unfortunately, when I trigger the infinite scroll feature, the slider does not displa ...

Choosing an option in react-select causes the page to unexpectedly shift

Encountering a problem with a mobile modal developed using react-select. The selectors are within a div with fixed height and overflow-y: scroll. Upon selecting an option for the 'Choose observer' select, the entire modal briefly jumps down in th ...

Traverse an array in JavaScript and display the elements

I am new to JavaScript and struggling with a question. I have an array of 120 numbers that I want to loop through, printing out specific words based on certain conditions. For example, if a number is divisible by 3, I need to print "Go", if divisible by 5, ...

Creating a dynamic dropdown menu with AngularJS based on user selection

Is there a way to dynamically populate options in a dropdown select menu when clicked? I would like to retrieve data from the backend upon clicking the select box. `ng-options="type.shorthand as type.name for type in allTypes"` I intend to save the value ...

Sending data through ajax to PHP on separate pages is a common practice

Here is where I choose my preferred option Company Name<br /> <select id="company" name="selected"> <option value="">Option A</option> <option value="">Option B</option> </select> When I click this, a mo ...

Struggling to implement the UI router into my Angular Framework

I've been working on a framework that is supposed to be router agnostic. While I've managed to make it work with ngRoute, I just can't seem to get it functioning with UI Router. Here's a snippet of the main app module: (function () { ...

Experimenting with a Jest test on an express middleware

I'm currently faced with a challenge in testing my controller (express middleware) using Jest. To better illustrate the issue, I will share the code snippet below: import request from 'utils/request'; import logger from 'config/logger& ...

Select a background using the Konvas.js library by clicking on a CSS class

I am attempting to use Konvas.js to change the background when clicking on an image with the imgback class: Link to Code I want to avoid assigning an id to each individual image Here is the code snippet: Jquery: $('.back').click(function(){ ...

Learn how to properly display the state array within a React component. Even though the array is present in the state, you may encounter issues where it

I am facing an issue while trying to display data from firestore in my React component. I have updated the global state array with the firestore data and it is being updated, but when I try to render that array, it shows as undefined. Initially, I attempt ...

Locate the final child element within a specified div using JQuery

I am looking to create a web application that allows users to input a question and select from multiple answers. I need to be able to dynamically add extra answer fields when the plus button is clicked, but only within the specific formRow (refer to the co ...

Exploring nested maps in JavaScript

I attempted to nest a map within another map and encountered an issue where the innermost map is being executed multiple times due to the outer map. The goal is to link each description to a corresponding URL (using # as placeholders for some links). Here ...

Choose a select few checkboxes and then disable the remaining checkboxes using Vue and Laravel

I'm currently working on a project using Laravel 10 and Vue3. In the form, users are allowed to select only 3 checkboxes. Once they have selected 3 checkboxes, all remaining checkboxes should be disabled. I attempted to implement this functionality a ...

What could be the reason for the malfunction of Twitter Bootstrap's typeahead feature in this case?

Struggling to implement typeahead.js into my current project. Despite having bootstrap loaded, the source code does not mention anything about typeahead. As a result, I included the standalone js file with hopes of making it work. Upon implementation, the ...

Node.JS Logic for Scraping and Extracting Time from Text

Currently, I am working on developing a web scraper to gather information about local events from various sites. One of my challenges is extracting event times as they are inputted in different formats by different sources. I'm seeking advice on how t ...

Exploring ways to check async calls within a React functional component

I have a functional component that utilizes the SpecialistsListService to call an API via Axios. I am struggling to test the async function getSpecialistsList and useEffect functions within this component. When using a class component, I would simply cal ...