Inserting values into a table using AngularJS

How can I differentiate checkboxes row-wise when trying to insert table values into the rows in HTML?

<div class="col-md-8"  ng-controller="checklistController" ng-init='populateChecklist(<%=request.getParameter("id")%>)'>
           <div class="table-responsive">
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th>Checklist Name</th>
                    <th>Not Required</th>
                    <th>Completed</th>
                    <th>Link</th>
                  </tr>
                </thead>
                  <tbody>
                   <tr ng-repeat = "x in list">
                     <td>{{x.name}}</td>
                    <td><input type="checkbox" ng-model='notRequiredCheckList'  ng-disabled="completedCheckList" ng-disabled="linkForCheckList"/></td>
                    <td><input type="checkbox" ng-disabled="notRequiredCheckList" ng-model="completedCheckList" /></td>
                    <td><input type="text" ng-model="linkForCheckList" size="50" ng-disabled="notRequiredCheckList"/></td>
                   </tr>
                  </tbody>
              </table>
          </div>
             <button type"button" ng-click="savelist(list)">Send</input>
      <div>

Javascript:

app.controller("checklistController",function($scope,$http){
      $scope.populateChecklist =  function(a){
           $http.get("commonAppGet.jsp?sqlStr=select name from checklist where 
         where id="+a).then(function(resp){
                $scope.list = resp.data;
             });
}
       $scope.savelist = function(list){
         $scope.res=list;
         alert($scope.res.length);
         alert($scope.res[0].name);
         alert($scope.res[1].name);
     }
});

How can I fetch the checkbox values for each row and send the data to the server for storage in the database using JSP?

Answer №1

It is crucial to address the security vulnerabilities in your code. Passing raw string arguments into SQL statements opens the door for potential SQL Injection attacks. To mitigate this risk, consider using ORM queries instead of direct strings.

To keep track of the rows where your checkboxes are inserted, you can utilize indexing within your AngularJS ng-repeat directive:

<tr ng-repeat="item in items track by $index">
   <td>
      <input type="checkbox" data-row-index="$index">
   </td>
</tr>

By incorporating the `$index` variable, each checkbox will be associated with its corresponding row number. Remember that array indexes typically start at 0. I hope this clarifies any concerns you had regarding tracking rows.

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

What is the best way to change an object into a string in node.js?

Recently, I've delved into the world of node js and I'm eager to create a basic coap client and server using this technology. Successfully, I managed to set up a server hosting a text file, but now I aim to access it from the client. var coap = ...

Eliminate the chosen and marked items from a list - Angular 2+/ Ionic 2

Currently, I have a checkbox list on my page. Whenever a user selects the "Save" button, the checked items should be removed from the list and moved to the saved tab that is also displayed. While I have successfully implemented the functionality for removi ...

new cookies are created without human intervention

Working on a project in Next.js and using the react-cookie npm package for managing sessions. I am creating a cookie with the key name "token" and assigning the token value as its value. However, an issue has arisen related to cookies where multiple cooki ...

Running the npm install command will eliminate any external JS or CSS files that are being

For my project, I incorporated jquery-datatimepicker by including jquery.datetimepicker.min.css and jquery.datetimepicker.full.min.js in angular.json and placed them within the node_modules/datetimepick directory. Here is a snippet of my angular.json conf ...

Issue with HTML 5 audio player not functioning correctly in Chrome browsers when trying to forward or rewind playback

I am encountering an issue with running the HTML5 audio player in Chrome. It works perfectly fine in IE 9+ and Firefox. I have implemented JavaScript functions for forwarding and rewinding the audio player on F7 and F8 key press. These functions work seaml ...

Is there a way to selectively include a filter in ng-repeat within a directive?

Utilizing an element directive across multiple views, the directive iterates through each 'resource' in a list of resources using ng-repeat="resource in resources". Different page controllers determine which resources are fetched from the API by ...

Problem with running Angular application on Google Chrome

When attempting to launch my angular app, I encounter a problem. Running 'ng serve --open' works fine, but when using VS Code with localhost configuration, I receive the error message: ERR_CONNECTION_REFUSED. My launch.json configuration is as fo ...

When implementing a v-for loop in Vue.js with Vuetify and using v-dialog components, the click event may be overwritten for all v-dialogs except

My app features the utilization of a Vuetify v-dialog within a v-for loop. However, I am encountering an issue where clicking on any chip within the loop triggers the click event for the last v-chip, instead of the specific one being clicked. It appears t ...

The response received from the server was a 404 status () indicating that the resource failed to load

I'm encountering an issue while loading from the web service, and receiving the following error: Failed to load resource: the server responded with a status of 404 () Your help would be greatly appreciated. You can also access the code on JSFiddl ...

Determine the week number based on a specified starting day for the week

If I have a custom week start day other than Monday, how should the getWeekNumber() prototype for the Date class be modified? Here is the existing code for calculating the ISO Week Number: Date.prototype.getWeekNumber = function() { // Create a dupli ...

Navigate to element based on data attributes

Trying to find a way to scroll an element to a specific ID using data-attributes instead of anchor tags. Here is what I have so far: When a button is clicked, it should display the content and scroll to the element that matches the data-attributes. Howeve ...

Reactiveness issue with Vue JS: Javascript module variables not updating

After creating a validator module inspired by vee-validate, I wanted to use it in combination with the composition api. However, I encountered an issue where the errorMessages stored in a reactive array were not updating in the Vue template despite being s ...

How can you specify the environment in Google Tag Manager?

I have integrated google tag manager and google analytics using the vue-gtm plugin found at vue-gtm Within google tag manager, I have set up 3 environments under the same container. In a user-defined variable called GA from environment, I have created a ...

display various images using angularJS

I'm looking to display different images based on the value of a variable. If the user's "ima" variable is empty, then I want to show the defaultImg variable. <img class="" ng-src="{{the displayed value will depend on the user's ima varia ...

JavaScript node_modules import issue

I've been grappling with this issue for quite some time now. The problem lies in the malfunctioning of imports, and I cannot seem to pinpoint the exact reason behind it. Let me provide you with a few instances: In my index.html file, which is complet ...

Issue arised while trying to open Bootstrap modal window due to conflict with surrounding elements

I'm facing a challenge with getting the bootstrap modal window to pop up on my website. Despite trying various solutions and troubleshooting steps, I haven't been able to resolve the issue. Even after eliminating all scripts except for the boots ...

Filtering Arrays Using AngularJS

Imagine having an array object defined as follows: [{ name: 'a', number: 1 }, { name: 'b', number: 2 }, { name: 'c', number: 3 }] If you specifically want to retrieve the 'name' attribute wi ...

Incorporating append and clone through a loop with jQuery

Is there a way to properly order div elements generated using .append() and .clone methods in a for loop? Despite creating the initial div before the loop, the order seems to be incorrect. The first div (class news0) is being displayed after the last div ( ...

Passing HttpClient from app.module to another module and then to a service in Angular

Currently, I am in the process of developing my own Angular NPM Package with the prefix "ngx-*". I have successfully compiled the package and am now integrating it into a new project by utilizing the npm link command. Within the service, there is a constr ...

Creating a Django-powered Ajax auto page loader

I am working on a website that would greatly benefit from having an autopager feature. An autopager automatically loads the next page when scrolling to the bottom, similar to how the Reddit Enhancement Suite functions. However, implementing this in Django ...