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
– shaunhusain, Commented Jan 28, 2014 at 6:24

Steve Eisner · Accepted Answer · 2014-02-27 18:07:26Z

95

In your controller:

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

edited Feb 27, 2014 at 18:07

Steve Eisner

2,01523 silver badges36 bronze badges

answered Jan 28, 2014 at 6:23

rg88

21k18 gold badges80 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steve Eisner Over a year ago

Remember in javascript to always specify the radix for parseInt stackoverflow.com/questions/850341/…

Simon Wicki · Accepted Answer · 2015-08-13 12:42:17Z

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, 2015 at 12:42

Simon Wicki

4,0705 gold badges24 silver badges25 bronze badges

answered Jan 28, 2014 at 7:56

hassassin

5,0641 gold badge32 silver badges39 bronze badges

2 Comments

Ken Over a year ago

very nice solution!

Jingshao Chen Over a year ago

Does not work if you want to +1 or -1 as the question asked.

CD.. · Accepted Answer · 2014-01-28 07:19:23Z

58

You can try:

{{ 1 * num_str + 1 }}

http://jsfiddle.net/Z32fP/

answered Jan 28, 2014 at 7:19

CD..

74.4k25 gold badges160 silver badges170 bronze badges

3 Comments

SeanCannon Over a year ago

Please don't ever add little hacks like this into a real code base.

discodane Over a year ago

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

Mohit Kanwar Over a year ago

I agree that this is a hack, but this looks like the only working solution

Mosho · Accepted Answer · 2014-07-11 06:16:33Z

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, 2014 at 6:16

Mosho

7,0783 gold badges36 silver badges52 bronze badges

1 Comment

Brad Martin Over a year ago

Angular's built in | number filter is the way to go in most cases.

Vadim Panov · Accepted Answer · 2016-02-20 05:40:10Z

20

{{ num_str - 0 }}

...works for me.

edited Feb 20, 2016 at 5:40

answered Feb 20, 2016 at 3:22

Vadim Panov

3512 silver badges7 bronze badges

3 Comments

Oliver Over a year ago

Genius solution. When num_str = '' Null string this still works. I thought I would get a NaN but works awesome!

John Churchill Over a year ago

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.

RASMiranda Over a year ago

Nice one, funny that {{ num_str + 1 }} doesn't work -.-

D. Kermott · Accepted Answer · 2014-12-16 16:50:26Z

11

None of the above worked for me.

But this did:

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

answered Dec 16, 2014 at 16:50

D. Kermott

1,69321 silver badges30 bronze badges

Comments

Jayantha Lal Sirisena · Accepted Answer · 2014-01-28 06:27:07Z

7

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

var num=Number (num_str);

answered Jan 28, 2014 at 6:27

Jayantha Lal Sirisena

21.4k11 gold badges74 silver badges94 bronze badges

1 Comment

Rob Evans Over a year ago

Downvoted because this is a discussion about angularjs, not pure javascript.

sunderls · Accepted Answer · 2014-01-28 08:37:02Z

2

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.

answered Jan 28, 2014 at 8:37

sunderls

7837 silver badges8 bronze badges

Comments

Anthue · Accepted Answer · 2020-06-16 11:44:55Z

1

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.

answered Jun 16, 2020 at 11:44

Anthue

693 bronze badges

Comments

Deepak Jha · Accepted Answer · 2022-04-14 09:22:27Z

1

Use in component.ts file

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

Use in component.html

convertStringToInt("2.4")

answered Apr 14, 2022 at 9:22

Deepak Jha

3794 silver badges10 bronze badges

Comments

isherwood · Accepted Answer · 2015-02-11 17:54:11Z

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, 2015 at 17:54

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Dec 23, 2014 at 22:23

webdev5

4871 gold badge8 silver badges22 bronze badges

Comments

Daniel Lackmann · Accepted Answer · 2019-07-25 11:04:04Z

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, 2019 at 11:04

Daniel Lackmann

1

Collectives™ on Stack Overflow

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

12 Answers 12

1 Comment

2 Comments

3 Comments

1 Comment

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

1 Comment

2 Comments

3 Comments

1 Comment

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related