How to parseInt in Angular js

Question

Probably  it is the simplest thing but I couldn t parse a string to Int in angular    What I am trying to do    lt input type  text  ng-model  num1  gt   lt input type  text  ng-model  num2  gt   Total    num1   num2     How can I sum these num1 and num2 values   Thnx

User · Answer

This are to way to bind add too numbers   x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 6 9 angular min js  gt  lt  script gt  x000D   lt script gt  x000D   x000D  var app   angular module  myApp        x000D   x000D  app controller  myCtrl   function  scope    x000D   scope total   function      x000D    return parseInt  scope num1    parseInt  scope num2   x000D    x000D     x000D   lt  script gt  x000D   lt body ng-app  myApp  ng-controller  myCtrl  gt  x000D   x000D   lt input type  number  ng-model  num1  gt  x000D   lt input type  number  ng-model  num2  gt  x000D  Total   num1 num2   x000D   x000D  Total    total      x000D   x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

lt input type  number  string-to-number ng-model  num1  gt   lt input type  number  string-to-number ng-model  num2  gt   Total    num1   num2     and in js    parseInt  scope num1    parseInt  scope num2

User · Answer

Inside template this working finely    lt  DOCTYPE html gt   lt html gt   lt script src  https   ajax googleapis com ajax libs angularjs 1 6 9 angular min js  gt  lt  script gt   lt body gt    lt div ng-app    gt   lt input ng-model  name  value  0  gt   lt p gt My first expression      name-0    5    lt  p gt   lt  div gt    lt  body gt   lt  html gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Perform the operation inside the scope itself    lt script gt  angular controller  MyCtrl   function  scope   window     scope num1  0   scope num2  1       scope total    scope num1    scope num2         lt  script gt   lt input type  text  ng-model  num1  gt   lt input type  text  ng-model  num2  gt   Total    total

[angularjs] How to parseInt in Angular.js

Examples related to angularjs