How to parseInt in Angular.js

by

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.

More Related Contents:

  1. ng-model for “ (with directive DEMO)
  2. angularjs 1.6.0 (latest now) routes not working
  3. How to iterate over the keys and values with ng-repeat in AngularJS?
  4. If you are not using a .(dot) in your AngularJS models you are doing it wrong?
  5. AngularJS execution order with `$q` — Chaining Promises
  6. Show spinner GIF during an $http request in AngularJS?
  7. Can you override specific templates in AngularUI Bootstrap?
  8. AngularJS-Twig conflict with double curly braces
  9. How to count total number of watches on a page?
  10. No ‘Access-Control-Allow-Origin’ header is present on the requested resource- AngularJS
  11. Preventing / dealing with double button clicks in angular
  12. Angular pass callback function to child component as @Input similar to AngularJS way
  13. Chaining Ajax calls in AngularJs
  14. Why angularjs will invoke function `name()` twice?
  15. When not to use ‘track by $index’ in an AngularJS ng-repeat?
  16. Loading a mock JSON file within Karma+AngularJS test
  17. Binding variables from Service/Factory to Controllers
  18. Angularjs how to cancel resource promise when switching routes
  19. How to highlight a current menu item?
  20. How can you limit the value from input using AngularJS?
  21. Error : getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443
  22. How to make orderby filter work on array of strings?
  23. Enable/Disable Anchor Tags using AngularJS
  24. How do i use $on in a service in angular?
  25. Illegal use of ngTransclude directive in the template
  26. AngularJS $q. Deferred queue
  27. angularjs 1.x support lifecycle and end-of-life
  28. Fontawesome is not working when project is built with grunt
  29. Binding inputs to an array of primitives using ngRepeat => uneditable inputs
  30. How to ‘unwatch’ an expression

Leave a Comment