EDUCBA

EDUCBA

MENUMENU
  • Blog
  • Free Courses
  • All Courses
  • All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial AngularJS Number Filter

AngularJS Number Filter

Kinjal Lodha
Article byKinjal Lodha
Priya Pedamkar
Reviewed byPriya Pedamkar

Updated April 13, 2023

AngularJS Number Filter

Definition of AngularJS Number Filter

AngularJS Number Filter is an in-built filter in AngularJS and is one of the many filters in AngularJS which can be used to convert the input number into string format as well as display any number with decimal points and the size of a fraction can be defined by the user in HTML view. The formatted text will be displayed on the HTML view without making any modification to the actual input number value in the backend(controller). AngularJS Number Filter can also be used in the controller or any javascript file using a $filter. This can be used with any HTML tag such as div, span, paragraph, select, input, etc.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Syntax:

Using in HTML view

<div> {{numberValue | number : franctionLength}} </div>

Using in Javascript file like controller, directive, helper

$filter('number')(numberValue, franctionLength)

How Number Filter works in AngularJS?

In the AngularJS framework, filters in the HTML view can be used with pipe(|) symbol and mentioning which filter is needed(number, date, amount, etc.). It is very important to know that $ is used to indicate that the Function is provided by the AngularJS framework and so it’s in-built.

Number Filter is used to formatting the number to a text which gets rendered on the HTML view. It can be used in the HTML view as well as in the controller.

Using in Html view

  • It formats the number and returns the string/text value
  • It uses interpolation where the first parameter is the number value which needs formatting, followed by a pipe (denotes filter in AngularJS) and adding the number as a key
  • fractionLength is optional, which denotes the number of decimals points to be considered while formatting

 Using in any javascript file like a controller, directive, helper

  • It uses $filter(‘number’) In-built function of AngularJS
  • It accepts 3 parameters, the first parameter is the number that needs formatting, the second parameter is fractionLength which is optional and denotes the number of decimals points to be considered while formatting
  • It returns the formatted value in string format

Points to keep a Note:

  • If input is Nan(Not A Number), then Empty String “” is returned
  • If input is null, then 0 gets returned
  • If input is undefined, then “” Empty String is returned
  • If input is having infinite value, then after formatting Infinity symbol ∞ is returned
  • Number formatting happens based on current locale (system time) for eg- en_IN local the decimal separator will be “.” and group separator will be “,”

Examples

Let us discuss examples of AngularJS Number Filter.

Example #1

Index.html

<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="NumberController">
Enter the number : <input ng-model="numberValue"/>
<br>
<br>
<div>Default Number filter : {{numberValue | number}}</div>
<br>
<div>Number with 4 decimal fraction : {{numberValue | number : 4}}</div>
<br>
<div>Number with null value : {{null | number}}</div>
<br>
<div>Number with undefined value : {{undefined | number}}</div>
<br>
<div>Number is NaN : {{ NanNumber | number}}</div>
<br>
Enter Number to be formatter in Controller : <input ng-model="numberValue2" />
<button ng-click="filterFunction(numberValue2)">SEND</button>
</div>
</body>
</html>

Script.js

function NumberController($scope, $filter) {
$scope.NanNumber = '87yh&';
$scope.filterFunction = function(value) {
var formatterNumber = $filter('number')(value, 2);
console.log('formatterNumber is :',formatterNumber);
};
}

Different Ways to Number Filter used in AngularJS

The above example shows how easily and in how many various different way Number Filter can be used in AngularJS. Let’s go over each of these

  • <div>Default Number filter :
    {{numberValue | number}}</div>

This line will format the numberValue based on current system locale and return the formatted value in string.

  • <div>Number with 4 decimal fraction :
    {{numberValue | number : 4}}</div>

This line will format the numberValue based on current system locale with decimal precision of 4 points and return the formatted value in string.

  • <div>Number with null value :
    {{null | number}}</div>

This line show whenever Number Filter encounters the numberValue a null, it will return 0 value back.

  •  <div>Number with undefined value :
    {{undefined | number}}</div>

This line show whenever Number Filter encounters the numberValue as undefined, it will return “ ” Empty String value back.

  • <div>Number is NaN :
    {{ NanNumber | number}}</div>

This line show whenever Number Filter encounters an Nan numberValue, it will return “ ” Empty String value back.

  • var formatterNumber =
    $filter('number')(value, 2);

This is an example of using a $filter in controller/js file.

Output:

 AngularJS filter number 1

Output 1: Entering a number in a number field

AngularJS filter number 2

Output 2: Using Filter in Controller

Output 3: Response in Browser console

AngularJS filter number 3

Conclusion

Number Filter is used for formatting number to string with a group and decimal separators to view it on the user interface so that even if back-end service send date in some other format UI application will still always show user-readable and user-friendly number value. This filter can also be used to do date modification in controller where a modified number field can be used for further processing.

Recommended Articles

We hope that this EDUCBA information on “AngularJS Number Filter” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

  1. AngularJS ng-model
  2. AngularJS Custom Filter
  3. AngularJS ng-model
  4. AngularJS Filters
SPRING BOOT Course Bundle - 5 Courses in 1 | 6 Mock Tests
20+ Hours of HD Videos
5 Courses
6 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5
ADO.NET Course Bundle - 22 Courses in 1 | 2 Mock Tests
80+ Hours of HD Videos
22 Courses
2 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5
ANGULAR JS Course Bundle - 16 Courses in 1 | 1 Mock Test
63+ Hours of HD Videos
16 Courses
1 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5
jQUERY Course Bundle - 13 Courses in 1
24+ Hour of HD Videos
13 Courses
Verifiable Certificate of Completion
Lifetime Access
4.5
Primary Sidebar
Popular Course in this category
ANGULAR JS Course Bundle - 16 Courses in 1 | 1 Mock Test
 63+ Hours of HD Videos
16 Courses
1 Mock Tests & Quizzes
  Verifiable Certificate of Completion
  Lifetime Access
4.5
Price

View Course
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2023 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more