Obtaining row data from a table upon selection of an input checkbox with the help of Angular.js

Question

Obtaining row data from a table upon selection of an input checkbox with the help of Angular.js

Can someone assist me with fetching row data when a checkbox is selected using angular.js? Here is the code I am working on:

<tbody id="detailsstockid">
  <tr ng-repeat="p in viewIncompleteData">
    <td>
       {{$index+1}}<input type="checkbox" ng-model="checkboxModel.value1">   
    </td>
    <td>
       {{p.Product_name}}
    </td>
    <td>
       {{p.Discount}}
    </td>
    <td>
       {{p.Offer}}
    </td>
    <td>
       {{p.unit_cost_price}}
    </td>
    <td>
       {{p.unit_sale_price}}
    </td>
    <td>
       {{p.quantity}}
    </td>
    <td> 
    </td>
  </tr> 
</tbody>

<div style="text-align:center; padding-top:10px;" ng-show="updateButton">
   <input type="button" class="btn btn-success" ng-click="UpdateProductstockData();"  id="addProfileData" value="Add Total"/>
</div>

When the user clicks on the Add Total button, the validation will be checked to see if any checkboxes are selected. If a checkbox is selected, the corresponding row data will be fetched inside the click event function. Can anyone provide guidance on this?

javascript angularjs

Answer 1

Answer №1

<tbody id="detailsstockid">
    <tr ng-repeat="p in viewIncompleteData">
    <!-- A new property has been added to the scope variable viewIncompleteData -->
    <td>{{$index+1}}<input type="checkbox" ng-model="p.isChecked">  </td> 
    <td>{{p.Product_name}}</td>
    <td>{{p.Discount}}</td>
    <td>{{p.Offer}}</td>
    <td>{{p.unit_cost_price}}</td>
    <td>{{p.unit_sale_price}}</td>
    <td>{{p.quantity}}</td>
    <td> 
  </td>
    </tr>   
    </tbody>

<div style="text-align:center; padding-top:10px;" ng-show="updateButton">
<input type="button" class="btn btn-success" ng-click="UpdateProductstockData();"  id="addProfileData" value="Add Total"/>
 </div>

Now, you can use viewIncompleteData[i].isChecked to identify which items are checked.

$scope.UpdateProductstockData = function(){
    angular.forEach($scope.viewIncompleteData, function(value, index){
        if(value.isChecked){
            // This row is selected
        }
    });
}

I hope this information is helpful for you.

Answer 2

<tbody id="detailsstockid">
    <tr ng-repeat="p in viewIncompleteData">
    <!-- A new property has been added to the scope variable viewIncompleteData -->
    <td>{{$index+1}}<input type="checkbox" ng-model="p.isChecked">  </td> 
    <td>{{p.Product_name}}</td>
    <td>{{p.Discount}}</td>
    <td>{{p.Offer}}</td>
    <td>{{p.unit_cost_price}}</td>
    <td>{{p.unit_sale_price}}</td>
    <td>{{p.quantity}}</td>
    <td> 
  </td>
    </tr>   
    </tbody>

<div style="text-align:center; padding-top:10px;" ng-show="updateButton">
<input type="button" class="btn btn-success" ng-click="UpdateProductstockData();"  id="addProfileData" value="Add Total"/>
 </div>

Now, you can use viewIncompleteData[i].isChecked to identify which items are checked.

$scope.UpdateProductstockData = function(){
    angular.forEach($scope.viewIncompleteData, function(value, index){
        if(value.isChecked){
            // This row is selected
        }
    });
}

I hope this information is helpful for you.

Answer 3

Answer №2

In my opinion, it would be beneficial to use an array to keep track of the values of checkboxes in their respective columns (such as using ng-model="checkboxModel.value1[$index]"). When the ADD TOTAL button is clicked, you can trigger a function like the one below:

function fetchCheckedData(){
 for(var i=0;i<$scope.viewIncompleteData.length;i++){
  if(checkboxModel.value1[i]==true){
   var data=$scope.viewIncompleteData[i];
  }
 }
}

This function will fetch the row data when a checkbox is checked.

Answer 4

In my opinion, it would be beneficial to use an array to keep track of the values of checkboxes in their respective columns (such as using ng-model="checkboxModel.value1[$index]"). When the ADD TOTAL button is clicked, you can trigger a function like the one below:

function fetchCheckedData(){
 for(var i=0;i<$scope.viewIncompleteData.length;i++){
  if(checkboxModel.value1[i]==true){
   var data=$scope.viewIncompleteData[i];
  }
 }
}

This function will fetch the row data when a checkbox is checked.

Obtaining row data from a table upon selection of an input checkbox with the help of Angular.js

Answer №1

Answer №2

Similar questions

Keep sensitive information confidential by refraining from displaying values in the URL while using

In Internet Explorer 9, the cursor unexpectedly moves up above the element

Rails and JavaScript: Changes made to the HTML on the page no longer trigger the UJS .change() function

Mobify enables the activation of jQuery Tabs on carousels

Connecting a Kendo Dropdown menu to external data sources for seamless integration

Is it possible to instantiate a Backbone view by referencing its string name that is stored within a JavaScript object?

Styling div elements to match the dimensions of table rows in CSS

Implemented a deletion feature in the list, however, certain items that have been checked are not being removed

What are the potential reasons for a function in React not being identified as a function?

arrange objects based on their position using javascript

"How to effectively utilize the AgnularJS ng-model directive in your code

Invoking a function within an Angular component

Retrieve documents from a nearby directory using an online platform

The Ray Intersect function in THREE.js encounters issues when a div element is introduced

Jquery functions are failing to work in a fresh window

Implementing angularjs into grails version 2.3.4

Can anyone recommend a reliable continuous integration pipeline for StrongLoop and GitHub integration?

Issue with Tailwind classes not applying correctly upon refreshing the page in production settings

Utilizing JSON information acquired through AJAX within a distinct function

What steps should I take to address the issue with my navbar?