CODEWITHSUNDEEP
javascripthtmlangularjs
Med
Med

Reputation: 183

Calculating sum using Angular

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 !

Upvotes: 3

Views: 594

Answers (4)

Med
Med

Reputation: 183

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.

Upvotes: 0

Alexander Elgin
Alexander Elgin

Reputation: 6965

There are several issues in your code:

  1. 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.
  2. You compute the $scope.total just once. Its result is not updated on change of $scope.price1 or $scope.price2
  3. 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>

Upvotes: 3

bto.rdz
bto.rdz

Reputation: 6720

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

Upvotes: 0

davidejones
davidejones

Reputation: 1949

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;

Upvotes: 0

Related Questions