25

Probably, it is the simplest thing but I couldn't parse a string to Int in angular..

What I am trying to do:

<input type="text" ng-model="num1">
<input type="text" ng-model="num2">

Total: {{num1 + num2}}

How can I sum these num1 and num2 values?

Thnx!

Mar
  • 1,526
  • 6
  • 21
  • 46

7 Answers7

51

You cannot (at least at the moment) use parseInt inside angular expressions, as they're not evaluated directly. Quoting the doc:

Angular does not use JavaScript's eval() to evaluate expressions. Instead Angular's $parse service processes these expressions.

Angular expressions do not have access to global variables like window, document or location. This restriction is intentional. It prevents accidental access to the global state – a common source of subtle bugs.

So you can define a total() method in your controller, then use it in the expression:

// ... somewhere in controller
$scope.total = function() { 
  return parseInt($scope.num1) + parseInt($scope.num2) 
}

// ... in HTML
Total: {{ total() }}

Still, that seems to be rather bulky for a such a simple operation as adding the numbers. The alternative is converting the results with -0 op:

Total: {{num1-0 + (num2-0)|number}}

... but that'll obviously won't parseInt values, only cast them to Numbers (|number filter prevents showing null if this cast results in NaN). So choose the approach that suits your particular case.

raina77ow
  • 103,633
  • 15
  • 192
  • 229
31

Option 1 (via controller):

angular.controller('numCtrl', function($scope, $window) {
   $scope.num = parseInt(num , 10);
}

Option 2 (via custom filter):

app.filter('num', function() {
    return function(input) {
       return parseInt(input, 10);
    }
});

{{(num1 | num) + (num2 | num)}}

Option 3 (via expression):

Declare this first in your controller: 

$scope.parseInt = parseInt;

Then:

{{parseInt(num1)+parseInt(num2)}}

Option 4 (from raina77ow)

{{(num1-0) + (num2-0)}}
Nes
  • 581
  • 4
  • 11
4
<input type="number" string-to-number ng-model="num1">
<input type="number" string-to-number ng-model="num2">

Total: {{num1 + num2}}

and in js :

parseInt($scope.num1) + parseInt($scope.num2)
nadav
  • 552
  • 5
  • 11
  • 2
    This may work, but to be clear, string-to-number is a suggested directive, not a part of Angular. See: https://docs.angularjs.org/error/ngModel/numfmt. It allows you to assign string values to numeric input fields. It does not change the actual type – jessewolfe Mar 23 '17 at 04:23
1

Perform the operation inside the scope itself.

<script>
angular.controller('MyCtrl', function($scope, $window) {
$scope.num1= 0;
$scope.num2= 1;


  $scope.total = $scope.num1 + $scope.num2;

 });
</script>
<input type="text" ng-model="num1">
<input type="text" ng-model="num2">

Total: {{total}}
Madhu
  • 2,416
  • 3
  • 15
  • 33
1
var app = angular.module('myApp', [])

app.controller('MainCtrl', ['$scope', function($scope){
   $scope.num1 = 1;
   $scope.num2 = 1;
   $scope.total = parseInt($scope.num1 + $scope.num2);

}]);

Demo: parseInt with AngularJS

Peter Girnus
  • 2,673
  • 1
  • 19
  • 24
0

This are to way to bind add too numbers

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

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

app.controller("myCtrl", function($scope) {
$scope.total = function() { 
  return parseInt($scope.num1) + parseInt($scope.num2) 
}
})
</script>
<body ng-app='myApp' ng-controller='myCtrl'>

<input type="number" ng-model="num1">
<input type="number" ng-model="num2">
Total:{{num1+num2}}

Total: {{total() }}


</body>
</html>
Eshu
  • 185
  • 6
0

Inside template this working finely.

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

<div ng-app="">
<input ng-model="name" value="0">
<p>My first expression: {{ (name-0) + 5 }}</p>
</div>

</body>
</html>
Mohammed Rishad
  • 225
  • 3
  • 6