get text box sum using angular js

Question

i need to show total amount. first and second text box value sum should be display in total text box. have any way to do it.

    <input type="text" ng-model="add.amount1"/>
<input type="text" ng-model="add.amount2"/>
  Total  <input type="text" ng-model={{add.amount1+add.amount2}}/>

Possible duplicate of [How to sum two fields in AngularJS and show the result in an label?](https://stackoverflow.com/questions/12755558/how-to-sum-two-fields-in-angularjs-and-show-the-result-in-an-label) — rmlan, Mar 10 '18 at 15:34
Look at the potential duplicate I proposed and use `value` instead of `ng-model` — rmlan, Mar 10 '18 at 15:36

Sajeetharan · Answer 1 · 2018-03-10T16:15:57.843

1

You need to have a ng-change on text boxes and call a function to calculate the sum.

DEMO

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.add = {};
$scope.add.amount1 = 0;
$scope.add.amount2 = 0;
$scope.calculateSum = function(){
  $scope.sum = parseInt($scope.add.amount1) + parseInt($scope.add.amount2);
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
 <input type="text" ng-change="calculateSum()" ng-model="add.amount1"/>
<input type="text" ng-change="calculateSum()" ng-model="add.amount2"/>
Total  <input type="text" ng-model="sum"/>
</body>

edited Mar 10 '18 at 16:15

answered Mar 10 '18 at 15:36

Sajeetharan

216,225
63
350
396

Small issue. actually i have 5 textboxes. total amount displayed when entered last textbox value. but total should be display and change when changing textbox values – kumara Mar 10 '18 at 16:05
then have ng-change only for the last text box value – Sajeetharan Mar 10 '18 at 16:05
check question. i added screen shot.if i enter measurement 05, total displayed – kumara Mar 10 '18 at 16:09
use ng-disabled and enabe it on ng-chage on textbox 5 – Sajeetharan Mar 10 '18 at 16:10
sorry i did not get u. what for ng-disabled. – kumara Mar 10 '18 at 16:13
ok got your issue, initialize the scope variables to 0 as above sample – Sajeetharan Mar 10 '18 at 16:16
error - Cannot set property 'measurement1' of undefined. (according to your sample . measurement1 = amount1) – kumara Mar 10 '18 at 16:22
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/166593/discussion-between-sajeetharan-and-user1177842). – Sajeetharan Mar 10 '18 at 16:41

score 0 · Answer 2 · answered Mar 10 '18 at 15:42

I hope this can also be considered

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
     $scope.add = {};
      $scope.add.amount1 = 1;
       $scope.add.amount2 = 2;
       $scope.sum = function(add) {
       
      
      return +add.amount1 + +add.amount2;
     }
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app='myApp'>
<div ng-controller='myCtrl'>

<input type="text" ng-model="add.amount1"/>
<input type="text" ng-model="add.amount2"/>
  Total  <input type="text"  value="{{sum(add)}}" />
</div>
 
</body>
</html>

get text box sum using angular js

2 Answers2