How can I parse String to Int in an Angular expression?
JavascriptAngularjsJavascript Problem Overview
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
Javascript Solutions
Solution 1 - Javascript
In your controller:
$scope.num_str = parseInt(num_str, 10); // parseInt with radix
Solution 2 - Javascript
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][1].
Hope this helped!
[1]: http://jsfiddle.net/XnJc9/ "fiddle"
Solution 3 - Javascript
Solution 4 - Javascript
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}}
Solution 5 - Javascript
{{ num_str - 0 }}
...works for me.
Solution 6 - Javascript
None of the above worked for me.
But this did:
{{ (num1_str * 1) + (num2_str * 1) }}
Solution 7 - Javascript
You can use javascript Number method to parse it to an number,
var num=Number (num_str);
Solution 8 - Javascript
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.
Solution 9 - Javascript
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.
Solution 10 - Javascript
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);
});
Solution 11 - Javascript
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>
Solution 12 - Javascript
Use in component.ts file
convertStringToInt(str){
var Num = parseInt(str);
return Num;
}
Use in component.html
convertStringToInt("2.4")