Updating a table cell triggers a change in every cell

Question

Updating a table cell triggers a change in every cell

I have a table with columns and I need to calculate values in other cells when there is a change event on the table. I want to use ng-change so that the changes are seen immediately. However, I am unsure of how to properly utilize ng-model - if it is used in one row, it affects all rows, causing each row to be recalculated, which is not the intended outcome. I only want to update one row at a time.

Angular requires ng-model when using ng-change. How can I correctly implement ng-change with multiple rows in a table?

I know I can achieve this using jQuery's onchange event, but since I already have a controller in HTML, I would prefer to handle everything in Angular.

Here is an example of one of the rows:

<tr class="jtable-data-row jtable-row-even" 
data-record-key="110000001"><td>110000001</td>
            <td><input type="text" 
    ng-change="RecalculateValues($event);" ng-model="Quantity" value="1"></td>
            <td><input type="text"
    ng-change="RecalculateValues($event);" ng-model="Bruto" value="7.15"></td>
            <td><input type="text"
    ng-change="RecalculateValues($event);" ng-model="Neto" class="cellContent" class="cellContent" value="17"></td>
            </tr>

EDIT:

Plunker here demonstrates my issue - even though the ng-change event is connected to the input values, the cells are not updating as expected.

javascript angularjs

Answer 1

Answer №1

Your approach needs some adjustment.

For instance:

<tr>
  <td>{{total}}</td>
  <td>
    <input type="text" ng-change="calculate()" ng-model="quantity">
  </td>
  <td>
    <input type="text" ng-change="calculate()" ng-model="bruto">
  </td>
</tr>

In the Controller:

$scope.quantity = 1;
$scope.bruto = 7.5;
$scope.total = 0;

$scope.calculate = function() {
  $scope.total = $scope.quantity * $scope.bruto;
}

$scope.calculate();

If there are multiple table rows, you will need an array of objects, each with a quantity, bruto, and total.

<tr ng-repeat="n in valuesArray">
  <td>{{n.total}}</td>
  <td>
    <input type="text" ng-change="calculate($index)" ng-model="n.quantity">
  </td>
  <td>
    <input type="text" ng-change="calculate($index)" ng-model="n.bruto">
  </td>
</tr>

In the Controller:

$scope.valuesArray = [
  {quantity: 1, bruto: 7.5, total: 0},
  {quantity: 1, bruto: 7.5, total: 0},
  {quantity: 1, bruto: 7.5, total: 0},
];

$scope.calculate = function(index) {
  $scope.valuesArray[index].total = $scope.valuesArray[index].quantity * $scope.valuesArray[index].bruto;
}

Answer 2

Your approach needs some adjustment.

For instance:

<tr>
  <td>{{total}}</td>
  <td>
    <input type="text" ng-change="calculate()" ng-model="quantity">
  </td>
  <td>
    <input type="text" ng-change="calculate()" ng-model="bruto">
  </td>
</tr>

In the Controller:

$scope.quantity = 1;
$scope.bruto = 7.5;
$scope.total = 0;

$scope.calculate = function() {
  $scope.total = $scope.quantity * $scope.bruto;
}

$scope.calculate();

If there are multiple table rows, you will need an array of objects, each with a quantity, bruto, and total.

<tr ng-repeat="n in valuesArray">
  <td>{{n.total}}</td>
  <td>
    <input type="text" ng-change="calculate($index)" ng-model="n.quantity">
  </td>
  <td>
    <input type="text" ng-change="calculate($index)" ng-model="n.bruto">
  </td>
</tr>

In the Controller:

$scope.valuesArray = [
  {quantity: 1, bruto: 7.5, total: 0},
  {quantity: 1, bruto: 7.5, total: 0},
  {quantity: 1, bruto: 7.5, total: 0},
];

$scope.calculate = function(index) {
  $scope.valuesArray[index].total = $scope.valuesArray[index].quantity * $scope.valuesArray[index].bruto;
}

Answer 3

Answer №2

The absence of app initialization is causing the method on change to not be triggered.

To resolve this, make sure to include <body ng-app="myApp">

Answer 4

The absence of app initialization is causing the method on change to not be triggered.

To resolve this, make sure to include <body ng-app="myApp">

Updating a table cell triggers a change in every cell

Answer №1

Answer №2

Similar questions

Display JSON values in sequence using Material-UI animations

Using JSON to pass a function with parameters

Creating a flexible image layout within a container with relative positioning

Troubleshooting problems with the CSS code for a progress bar in Gmail

Tips for adding additional rows or cells to a table with jQuery

Having trouble importing zone.js in Angular 14 and Jest 28

Using interpolation brackets in Angular2 for variables instead of dots

Unable to extract query parameters from URL using Express JS as req.query returns an empty object

The Google map shifts beyond the perceived limits of the world

Storing data efficiently with Angular 2's local storage service

Discover the best practices for utilizing the npm commands.test function

Obtain the filepath of the uploaded file

"Enhance User Interactions with Angular-ui Tooltips Featuring

React error: Objects cannot be used as children in React components

The absence of responseJSON in the jquery ajax response is causing an issue

Having trouble rendering the response text from the API fetched in Next.js on a webpage

Modify the website address and show the dynamic content using AJAX

Customized settings saved in local storage using JavaScript

What is the best way to divide data prior to uploading it?

Avoiding the backslash in JavaScript