Best IT Recipes

Like parseInt in Angular.js

This may be the easiest thing, but I couldn't parse the string in Int in angular ..

What I'm 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!

+19
angularjs
10 Oct '14 at 7:08
source share
7 answers

You cannot (at least at the moment) use parseInt inside angular expressions, as they are not evaluated directly. Quoting a document :

Angular does not use JavaScript eval() to evaluate expressions. Instead, angular $parse services process these expressions.

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

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

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

However, this seems rather cumbersome for such a simple operation as adding numbers. An alternative is to convert the results using -0 op:

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

... but this, obviously, will not have parseInt values, but only discards them in Numbers (the |number filter prevents null if this result leads to NaN ). Therefore, choose the approach that suits your particular case.

+41
Oct 10 '14 at 7:40
source share

Option 1 (via controller):

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


Option 2 (through a special 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)}}
+27
10 Oct '14 at 7:41
source share
 <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)
+3
Apr 03 '16 at 11:28
source share

Perform the operation inside the area 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}}
+1
Oct 10 '14 at 7:19
source share
 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

+1
Oct 26 '15 at 23:09
source share

This is to add numbers to the binding method.

 <!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>
0
May 25 '18 at 11:14
source share

Inside the template, this works fine.

 <!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>
0
Jan 24 '19 at 9:36
source share


More articles:


All Articles