Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to convert String to number using AngularJs?
Overview
To convert the String type value to the Number type value is easy to manipulate with AngularJs as it has in-built function such as parseInt(), parseFloat() which convert the String type of number to the Number type and “isNumber()” function of angular which cross check whether the given data is converted to the number or not. For example if a number is of type decimal String type then we will use parseFloat() function to convert the String to Number, otherwise if we had to convert without the decimal number then we will use parseInt() function.
Syntax
The syntax used in this are −
var num = parseInt(“String here...”); angular.isNumber( num );
In the above given syntax a String value is passed in the parseInt() method as a parameter. The “angular.isNumber()” checks whether the above converted number is of type number or string.
Algorithm
Step 1 − Create a HTML page in your desired code editor, add the Content Delivery Network (CDN) link of AngularJs to get the functionality of AngularJs onto your web page.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
Step 2 − Add the div element in HTML with “ng-app” definition and “ng-controller”, insert the expression variable in it.
<div ng-app="myApp" ng-controller="myController">
String: {{a}} <br />
String converted to number: {{output}}
</div>
Step 3 − Create the angular module and controller, define the variable inside it as given in below example.
Step 4 − Use parseInt() function to convert the given String to Number.
Step 5 − Use isNumber() function to check, if the given value is of type Number it will return true, otherwise it will return false.
Example 1
In this example, a given value which is of String type is being converted to Number type with parseInt() function which is a pre-built function in angularJs. Then to check whether the value is converted we use isNumber() function.
<html>
<head>
<title>Convert String to Number using AngularJs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<h2>Using parseInt()</h2>
<div ng-app="myApp" ng-controller="myController">
String: {{a}}<br />
String converted to number: {{output}} ({{outputNum}})
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myController", ($scope) => {
$scope.a = "82.25";
$scope.outputNum = parseInt($scope.a);
$scope.output = angular.isNumber($scope.outputNum);
})
</script>
</body>
</html>
So from the above example as “82.25” is stored as a String in a $scope.a variable, then it is passed as parameter in the parseInt() function. The parseInt() returns a Number type value without the decimal number. This value is passed in the isNumber() function, as we had already converted the String value to number so isNumber() will return true.
Example 2
In this example, we will use the parseFloat() method to convert the String type value to Number type and we will use the isNumber() method of angular to check whether a converted value is of type Number or not.
<html>
<head>
<title>Convert String to Number using AngularJs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<h2>Using parseFloat()</h2>
<div ng-app="myApp" ng-controller="myController">
String: {{a}}<br />
String converted to number: {{output}} ({{outputNum}})
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myController", ($scope) => {
$scope.a = "82.25"; //decimal value of String type
$scope.outputNum = parseFloat($scope.a);
$scope.output = angular.isNumber($scope.outputNum);
})
</script>
</body>
</html>
In this example a decimal String value is given, so we had used parseFloat() function to convert a String value to Number type decimal value. The number is then checked by passing the value in isNumber(), as after parsing the value it returns a type number so it will return true.
Conclusion
In the parseInt() function if the number is written after the words such as: “Hello 80”, then the parseInt() will return a “NaN” as output. The return type of isNumber() is Boolean, when a value passed to the function is of type Number it will return true, otherwise it will return false. The above solution is helpful in many cases, for example in a application a user has input sentence and he has to extract the age and birth year of an individual person from it, so we will parse the given sentence of String type to parseInt() method so it will extract the age and number from it.
4K+ Views
