Calculating sum using Angular

Question

I'm beginner on AngularJs and I have a difficult to show the sum of two numbers. The first script work perfectly :

<div>
   <p><input type="text" ng-model="price1" /> <strong>{{price1}}</strong></p>
   <p><input type="text" ng-model="price2" /> <strong>{{price2}}</strong></p>
   <p><strong>{{total = (price1 * 1 + price2 * 1) }}</strong></p>
</div>

But when I try to test this using a controller, like this :

<div ng-controller="myCtrl">
   <p><input type="text" ng-model="price1" /> <strong>{{price1}}</strong></p>
   <p><input type="text" ng-model="price2" /> <strong>{{price2}}</strong></p>
   <p><strong>{{total}}</strong></p>
</div>
<script>
   var app = angular.module('firstApp', []);
   app.controller('myCtrl', ['$scope', function($scope) {
      $scope.total = ($scope.price1  + $scope.price2);
   }]);
</script>

I have no result, just a NaN value. I have no idea what happen !

Alexander Elgin · Accepted Answer · 2017-02-01 01:35:04Z

There are several issues in your code:

The variables $scope.price1 and $scope.price2 are not defined once the controller is initialized. Arithmetical operation using undefined value produces NaN as the result.
You compute the $scope.total just once. Its result is not updated on change of $scope.price1 or $scope.price2
In the inputs you should use type="number" not type="text" then the values of $scope.price1 and $scope.price2 will be parsed and summed up as numbers. In your code they are concatenated as strings.

var app = angular.module('myApp', []);

app.controller("myCtrl", function ($scope) {
  $scope.price1 = 1;
  $scope.price2 = 2;
  
  $scope.getTotal = function() {
    return $scope.price1 + $scope.price2;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="myCtrl">
   <p><input type="number" ng-model="price1" /> <strong>{{price1}}</strong></p>
   <p><input type="number" ng-model="price2" /> <strong>{{price2}}</strong></p>
   <p><strong>{{getTotal()}}</strong></p>
</div>
</div>

davidejones · Accepted Answer · 2017-02-01 01:22:12Z

0

Do you need to set default values? Is it saying NaN because you haven't entered anything in the input boxes?

Try initializing the variables in the controller above the total calculation.

$scope.price1 = 0;
$scope.price2 = 0;

answered Feb 1, 2017 at 1:22

davidejones

1,9591 gold badge16 silver badges18 bronze badges

Comments

bto.rdz · Accepted Answer · 2017-02-01 01:28:49Z

0

The values are undefined when you call the sum, just give them an initial value

$scope.price1 = 1;
$scope.price2 = 2;
$scope.total = ($scope.price1  + $scope.price2);

What you are doing is equals to:

$scope.total = ($scope.price1  + $scope.price2);
$scope.total = (undefined  + undefined); //equals to NaN

answered Feb 1, 2017 at 1:28

bto.rdz

6,7404 gold badges41 silver badges56 bronze badges

Comments

Med · Accepted Answer · 2017-02-01 18:22:19Z

0

I do it but I have to give a value in my controller for price1 and price2, like that :

<script>
   var app = angular.module('firstApp', []);
   app.controller('myCtrl', ['$scope', function($scope) {
      $scope.price1 = 1;
      $scope.price2 = 2;
      $scope.total = ($scope.price1 + $scope.price2);
   }]);
</script>

But I have two input. I want to use them like a calculator, put a value into them and see the result.

answered Feb 1, 2017 at 18:22

Med

1839 bronze badges

Collectives™ on Stack Overflow

Calculating sum using Angular

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related