4

I am trying to find sum of two numbers entered in text boxes and display result in third text box, using controller in AngularJS. But I am not getting the answer. Here's the code that I have tried:

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <h1> ANGULAR JS</h1>
  <script src="https://code.angularjs.org/1.6.9/angular.js"></script>
  <script src="E:\akansha\angular-1.7.6\angular.js"></script>
  <script src="E:\akansha\angular-1.7.6\angular.min.js"></script>
  <div ng-app="sumApp" ng-controller="sumCtrl">
    Enter first number<input type="number" ng-model="num1"><br> Enter second number<input type="number" ng-model="num2"><br> Sum
    <input type="text" ng-model="sum"> {{num1+" "+num2}}
  </div>
  <script>
    var app = angular.module('sumApp', []);
    app.controller('sumCtrl', function($scope) {
      var a = $scope.num1;
      var b = $scope.num2;
      var c = a + b;
      $scope.sum = c;
    });
  </script>
</body>

</html>

Please tell me where I am wrong.

Improve this question
4
  • 1
    There is a typo at Sum<input type="text" mg-model="sum">. Change the mg-model to ng-model. Commented Mar 5, 2019 at 6:58
  • I have rectified it, but still the problem is same. Commented Mar 5, 2019 at 7:04
  • 1
    I had created an example. Hope this helps. Commented Mar 5, 2019 at 7:15
  • The code looks to be working in your example? Could you elaborate on what you are trying to achieve? Commented Mar 5, 2019 at 7:34

2 Answers 2

Reset to default
2

It is a very easy solution Akansha. All you need to do here is make a few changes as follows:

  • First of all, 

    Sum<input type="text" ng-model="sum">
   {{num1+" "+num2}}

    This isn't right as far as you are trying to find the sum... because, what you are actually doing is just appending(attaching the second number with the first one with a space in between).

So you can do ANY ONE of the following 3 things:

  1. Replace the above code with: Sum<input type="text" ng-model="sum" value="{{num1+num2}}">.

    You see, the reason why your result was coming outside the text box was because you had not given it as a value of the text box, instead it was plainly placed outside it. by using the value="{{num1+num2}}", you would be setting the value of the text box itself.

The code in this approach would be like:

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <h1> ANGULAR JS</h1>
  <script src="https://code.angularjs.org/1.6.9/angular.js"></script>
  <script src="E:\akansha\angular-1.7.6\angular.js"></script>
  <script src="E:\akansha\angular-1.7.6\angular.min.js"></script>
  <div ng-app="sumApp" ng-controller="sumCtrl">
    Enter first number<input type="number" ng-model="num1"><br> Enter second number<input type="number" ng-model="num2"><br> Sum
    <input type="text" ng-model="sum" value="{{num1+num2}}">
  </div>
  <script>
    var app = angular.module('sumApp', []);
    app.controller('sumCtrl', function($scope) {
      var a = $scope.num1;
      var b = $scope.num2;
      var c = a + b;
      $scope.sum = c;
    });
  </script>
</body>

</html>

  1. In case you need to wait till user has entered both numbers and need to calculate the sum once both are entered, then use $watchGroup

    $scope.$watchGroup(['num1', 'num2'],function(){ 
    $scope.sum = $scope.num1 + $scope.num2;
});

  2. If you want the result box to be updated as and when you type the 1st solution should do, else if you need the page to wait till you have typed both numbers completely, then just introduce a button. on clicking the button, call a function which would calculate the sum for you in the controller, and set the value of the result box from the controller itself, using the innerHTML attribute.

here is the code in this way:

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <h1> ANGULAR JS</h1>
  <script src="https://code.angularjs.org/1.6.9/angular.js"></script>
  <script src="E:\akansha\angular-1.7.6\angular.js"></script>
  <script src="E:\akansha\angular-1.7.6\angular.min.js"></script>
  <div ng-app="sumApp" ng-controller="sumCtrl">
    Enter first number<input type="number" ng-model="num1"><br> Enter second number<input type="number" ng-model="num2"><br>
    <button ng-click="add();">Add</button>
    <br><br> Sum
    <input type="text" id="sum" ng-model="sum">
  </div>
  <script>
    var app = angular.module('sumApp', []);
    app.controller('sumCtrl', function($scope) {
      var a = $scope.num1;
      var b = $scope.num2;
      $scope.add = function() {
        $scope.sum = $scope.num1 + $scope.num2;
        document.getElementById("sum").innerHTML = $scope.sum;
      }
    });
  </script>
</body>

</html>

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

3 Comments

No probs buddy... Hope this solved your problem. If not, you could let me know.
Thanks Rai but can you guide me how to write the same code in app.module.ts and app.component
Wouldn't be a problem @Akansha. But the comments section would turn into a chat if we discuss it here. This link might probably help you I guess. Get back here if you're stuck.
2

Aside from ng-model typo you should watch the num1,num2 and then set the sum model. the current code you have, only ran one time at start of your controller and does not watch for later changes:

app.controller('sumCtrl', function($scope){
  $scope.$watchGroup(['num1', 'num2'],function(){
    $scope.sum = 1*$scope.num1 +  1*$scope.num2;
  });
});

Pay attention to the multiplication of each by 1 which converts the values to number from string. This should be done in case the input boxes are just input type = text instead of input type = number which would result in string concatenation instead of addition of numbers.

Improve this answer

3 Comments

Your code is alright Mahdi. Just that you don't need to do the multiplying by 1 part brother. it's not necessary since the 2 input boxes are already input type = number. otherwise your code should work fine.
@Rai You r right I missed that! On my local I did not use number types. But it works for both cases...
Okay buddy.. I've edited your answer making a mention of this useful observation which you've made.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.