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}}/>

<input type="text" ng-model={{add.amount1+add.amount2}}/> this is not working — kumara
– kumara, Commented Mar 10, 2018 at 15:30
Possible duplicate of How to sum two fields in AngularJS and show the result in an label? — rmlan
– rmlan, Commented Mar 10, 2018 at 15:34
Look at the potential duplicate I proposed and use value instead of ng-model — rmlan
– rmlan, Commented Mar 10, 2018 at 15:36

Sajeetharan · Accepted Answer · 2018-03-10 16:15:57Z

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, 2018 at 16:15

answered Mar 10, 2018 at 15:36

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

8 Comments

kumara Over a year ago

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

Sajeetharan Over a year ago

then have ng-change only for the last text box value

kumara Over a year ago

check question. i added screen shot.if i enter measurement 05, total displayed

Sajeetharan Over a year ago

use ng-disabled and enabe it on ng-chage on textbox 5

kumara Over a year ago

sorry i did not get u. what for ng-disabled.

|

G_S · Accepted Answer · 2018-03-10 15:42:58Z

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>

Collectives™ on Stack Overflow

get text box sum using angular js

2 Answers 2

8 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Linked

Related