How can I parse String to Int in an Angular expression?

Question

A number string '5'

var num_str = '5';

How can I parseInt and let below answers correct at the same time?

{{num_str + 1}}  // 6
{{num_str - 1}}  // 4

parseInt can't be used in an Angular expression,

{{parseInt(num_str) - 1}}

number filter can't do add and minus,

{{num_str - 1 | number}}

If anyone have useful suggestion, I will very appreciate of you

Sounds like you want a custom filter they're fairly easy to write just a function that takes the input and returns the output. — shaunhusain, Jan 28 '14 at 06:24

score 95 · Accepted Answer · edited Feb 27 '14 at 18:07

95

In your controller:

$scope.num_str = parseInt(num_str, 10);  // parseInt with radix

edited Feb 27 '14 at 18:07

Steve Eisner

2,005
23
35

answered Jan 28 '14 at 06:23

rg88

20,742
18
76
110

9

Remember in javascript to always specify the radix for parseInt http://stackoverflow.com/questions/850341/how-do-i-work-around-javascripts-parseint-octal-behavior – Steve Eisner Feb 27 '14 at 18:05

score 80 · Answer 2 · edited Aug 13 '15 at 12:42

80

I prefer to use an angular filter.

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

then you can use this in the dom:

{{'10'|num}}

Here is a fiddle.

Hope this helped!

edited Aug 13 '15 at 12:42

Simon Wicki

4,029
4
22
25

answered Jan 28 '14 at 07:56

hassassin

5,024
1
29
38

2

Useful and in the AngularJs way. Thanks! – javi_swift Sep 26 '16 at 11:17
1

very nice solution! – Ken Apr 05 '17 at 18:04
1

Does not work if you want to +1 or -1 as the question asked. – Jingshao Chen Nov 10 '17 at 06:52

score 58 · Answer 3 · answered Jan 28 '14 at 07:19

58

You can try:

{{ 1 * num_str + 1 }}

http://jsfiddle.net/Z32fP/

answered Jan 28 '14 at 07:19

CD..

72,281
25
154
163

13

Please don't ever add little hacks like this into a real code base. – AlienWebguy Jul 15 '15 at 06:54
This won't work if the number is in the thousands and the string has a comma in it. This could turn 1000 into a number but not 1,000 – discodane Nov 27 '15 at 16:09
I agree that this is a hack, but this looks like the only working solution – Mohit Kanwar Apr 01 '20 at 16:34

score 24 · Answer 4 · answered Jul 11 '14 at 06:16

24

Another option would be:

$scope.parseInt = parseInt;

Then you could do this like you wanted:

{{parseInt(num_str)-1}}

This is because angular expressions don't have access to the window, only to scope.

Also, with the number filter, wrapping your expression in parentheses works:

{{(num_str-1) | number}}

DEMO

answered Jul 11 '14 at 06:16

Mosho

7,099
3
34
51

1

Angular's built in | number filter is the way to go in most cases. – Brad Martin Sep 11 '15 at 20:02

Vadim Panov · Answer 5 · 2016-02-20T05:40:10.040

20

{{ num_str - 0 }}

...works for me.

edited Feb 20 '16 at 05:40

answered Feb 20 '16 at 03:22

Vadim Panov

341
2
7

1

Genius solution. When num_str = '' Null string this still works. I thought I would get a NaN but works awesome! – Oliver Aug 22 '17 at 09:58
Nice solution. Works for null and blank string; this is just Javascript behavior so it should work permanently. Only gets NaN for undefined or the string is not a valid number. – John Churchill Mar 22 '21 at 15:31
Nice one, funny that {{ num_str + 1 }} doesn't work -.- – RASMiranda Feb 16 '23 at 14:14

score 11 · Answer 6 · answered Dec 16 '14 at 16:50

11

None of the above worked for me.

But this did:

{{ (num1_str * 1) + (num2_str * 1) }}

answered Dec 16 '14 at 16:50

D. Kermott

1,613
17
24

score 7 · Answer 7 · answered Jan 28 '14 at 06:27

7

You can use javascript Number method to parse it to an number,

var num=Number (num_str);

answered Jan 28 '14 at 06:27

Jayantha Lal Sirisena

21,216
11
71
92

Downvoted because this is a discussion about angularjs, not pure javascript. – Rob Evans Jun 30 '16 at 20:53

score 2 · Answer 8 · answered Jan 28 '14 at 08:37

Besides {{ 1 * num_str + 1}} You can also try like this(minus first):

{{ num_str - 0 + 1}}

But the it's very fragile, if num_str contains letters, then it will fail. So better should try writing a filter as @hassassin said, or preprocess the data right after initiating it.

score 1 · Answer 9 · answered Jun 16 '20 at 11:44

You can create a Pipe and use it wherever you want in your system.

import { Pipe, PipeTransform } from '@angular/core';
 @Pipe({
     // tslint:disable-next-line:pipe-naming
     name: 'toNumber',
     pure: false }) export class ToNumberPipe implements PipeTransform { 
     public transform(items: any): any {
         if (!items) {
             return 0;
         }
         return parseInt(items, 10);
     } }

In the HTML

{{ attr.text | toNumber }}

Remember to declare this Pipe to be accessfull in your modules file.

score 1 · Answer 10 · answered Apr 14 '22 at 09:22

1

Use in component.ts file

convertStringToInt(str){ 
  var Num = parseInt(str); 
  return Num;
}

Use in component.html

convertStringToInt("2.4")

answered Apr 14 '22 at 09:22

Deepak Jha

359
2
10

score 0 · Answer 11 · edited Feb 11 '15 at 17:54

0

I tried the solutions mentioned above and none of them worked for me. I used JSON.parse and it worked:

$http.get('/api/getAdPolling')
  .success(function (data) {
    console.log('success: ' + data.length);

    if (JSON.stringify(data) != "not found") {
        $scope.adPoll = JSON.parse(data);
    }
})
  .error(function (data) {
    console.log('Error: ' + data);
});

edited Feb 11 '15 at 17:54

isherwood

58,414
16
114
157

answered Dec 23 '14 at 22:23

webdev5

467
1
8
22

score 0 · Answer 12 · answered Jul 25 '19 at 11:04

0

Not really great but a funny hack: You can -- instead of +

{{num_str -- 1 }}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app>
  {{'1'--1}}
</div>

answered Jul 25 '19 at 11:04

Daniel Lackmann

1

How can I parse String to Int in an Angular expression?

12 Answers12

Linked