Add 2 input values and display result in another input box

Question

I am new to AngularJS. Want to get values from 2 input text boxes, add them and then display them in a 3rd text box.

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.sum = ( $scope.a + $scope.b );
});

<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form>
    <input ng-model="a" type="number">
    <input ng-model="b" type="number">
    <input ng-model="sum" type="number">
  </form>
</div>

</body>
</html>

Meet Patel · Accepted Answer · 2020-02-19 11:00:21Z

1

You can achieve without creating any function just put value = {{a+b}} in you 3rd input tag

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.sum = ( $scope.a + $scope.b ); // this will assign value sum only when one time- when controller init happen and that time a and b both is undefined 
});

<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form>
    <input ng-model="a" type="number">
    <input ng-model="b" type="number">
    <input value="{{a + b}}" type="number">
  </form>
</div>

</body>
</html>

edited Feb 19, 2020 at 11:00

answered Feb 19, 2020 at 9:00

Meet Patel

5104 silver badges12 bronze badges

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

Comments

georgeawg · Accepted Answer · 2020-02-18 23:41:31Z

1

Use the ng-change directive:

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.a = $scope.b = $scope.sum = 0;
    $scope.updateSum = function() {
        $scope.sum =  $scope.a + $scope.b;
    };
});

<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form>
    A=<input ng-model="a" ng-change="updateSum()" type="number"><br>
    B=<input ng-model="b" ng-change="updateSum()" type="number"><br><br>
    Sum=<input ng-model="sum">
  </form>
</div>

</body>
</html>

edited Feb 18, 2020 at 23:41

answered Feb 18, 2020 at 23:36

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

Add 2 input values and display result in another input box

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related