CODEWITHSUNDEEP
javascriptjqueryangularjs
Vignesh Rajarajan
Vignesh Rajarajan

Reputation: 99

AngularJS - add all values in table row dynamically

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>

Upvotes: 2

Views: 1346

Answers (4)

Jai
Jai

Reputation: 74738

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>

Upvotes: 1

akgaur
akgaur

Reputation: 785

<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.

Upvotes: 2

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

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>

Upvotes: 2

Chris Hermut
Chris Hermut

Reputation: 1758

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)

Upvotes: 1

Related Questions