AngularJS - add all values in table row dynamically

Question

I'm having a table where the user will enter data in the fields when they enter each value in each cell, the last cell needs to be updated with its total. with this snippet I'm getting 45+90+36. I know its easy with jQuery, but I wanted to do this as simple as possible in Angular.

<tr>
  <td rowspan="4"><span class="textRotate">TESTING</span>
  </td>
  <td>XXXX</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxPrevention">$</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxAppraisal">$</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxInternalFailure">$</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxxExternalFailure">$</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxPerformance">NA</td>
  <td ng-model="tableVal.xxxTotal">{{tableVal.xxxxPrevention + tableVal.xxxxAppraisal}}</td>
  <td>%</td>
</tr>

akgaur · Accepted Answer · 2015-12-08 11:51:42Z

2

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="">
<tr>
  <td rowspan="4"><span class="textRotate">TESTING</span>
  </td>
  <td>XXXX</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxPrevention">$</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxAppraisal">$</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxInternalFailure">$</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxxExternalFailure">$</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxPerformance">NA</td>
  <td ng-model="tableVal.xxxTotal">{{ (tableVal.xxxxPrevention|number) -- (tableVal.xxxxAppraisal|number)}}</td>
  <td>%</td>
</tr>
  </div>

Hope this helps.

answered Dec 8, 2015 at 11:51

akgaur

7951 gold badge7 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vignesh Rajarajan Over a year ago

one more doubt. when the value entered in text box crosses 4 digits its saying NAN why?

akgaur Over a year ago

Try changing the expression to "{{ (tableVal.xxxxPrevention) -- (tableVal.xxxxAppraisal)}}" . It works. stackoverflow.com/questions/16383767/…, read this for further details.

Vignesh Rajarajan Over a year ago

thanks it works and tableVal.xxxTotal is not getting the current total, when in console.log it prints undefined, any idea on that?

Shashank Agrawal · Accepted Answer · 2015-12-08 11:43:46Z

2

You have two options:

Solution 1:

You can make your type of input as number instead of text (for HTML 5):

<tr>
  <td rowspan="4"><span class="textRotate">TESTING</span>
  </td>
  <td>XXXX</td>
  <td>
    <input id="testingInput" type="number" ng-model="tableVal.xxxxPrevention">$</td>
  <td>
    <input id="testingInput" type="number" ng-model="tableVal.xxxxAppraisal">$</td>
  <td>
    <input id="testingInput" type="number" ng-model="tableVal.xxxxInternalFailure">$</td>
  <td>
    <input id="testingInput" type="number" ng-model="tableVal.xxxxxExternalFailure">$</td>
  <td>
    <input id="testingInput" type="number" ng-model="tableVal.xxxxPerformance">NA</td>
  <td>{{tableVal.xxxxPrevention + tableVal.xxxxAppraisal}}</td>
  <td>%</td>
</tr>

Solution 2:

Use the parseInt() method before sum:

<td>{{parseInt(tableVal.xxxxPrevention) + parseInt(tableVal.xxxxAppraisal)}}</td>

answered Dec 8, 2015 at 11:43

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

1 Comment

Vignesh Rajarajan Over a year ago

thanks for your suggestion, solutions 2 doesn't work, but solution 1 works fine

Chris Hermut · Accepted Answer · 2015-12-08 11:32:03Z

1

Why not using $scope.$watch().

Ex.

$scope.$watch('tableVal', function (nV, oV) {
    // nV == new value, oV == old value
    if (nV != oV) {
        // Run some function here to update total and assign it to $scope.property
    }
}, true)

answered Dec 8, 2015 at 11:32

Chris Hermut

1,7564 gold badges17 silver badges32 bronze badges

Comments

Jai · Accepted Answer · 2015-12-08 11:54:37Z

Use a method on $scope to calculate the numbers by passing the ng-model to that method:

$scope.tableVal.xxxtotal = function(){
    return (+$scope.tableVal.xxxxPrevention) + (+$scope.tableVal.xxxxAppraisal);
}

and in the view update this td:

<td>{{ tableVal.xxxTotal(); }}</td>

Usage of ng-model directive on td is useless. That should only be used on input elements.

A simple test snippet:

var app = angular.module('myapp', []);

app.controller('appCtrl', ['$scope',
  function($scope) {
    $scope.obj = {
      test1: "",
      test2: "",
      total:function(){
         return (+$scope.obj.test1) + (+$scope.obj.test2);
      }
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div ng-app='myapp' ng-controller='appCtrl'>
  <input type='text' ng-model='obj.test1'>
  <input type='text' ng-model='obj.test2'>
  <pre>{{ obj.total(); }}</pre>
</div>

Collectives™ on Stack Overflow

AngularJS - add all values in table row dynamically

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related