EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial AngularJS Number Filter
Secondary Sidebar
AngularJS Tutorial
  • AngularJS Basic and Advance
    • What is AngularJS
    • Career In AngularJS
    • Uses of Angular JS
    • AngularJS Architecture
    • Angular JS Application
    • AngularJS Application
    • AngularJS Filter Array
    • AngularJS ng-style
    • AngularJs ng init
    • AngularJs ng-repeat
    • AngularJs ng-change
    • AngularJs ng-options
    • AngularJs expressions
    • AngularJs onclick
    • AngularJS ng-show
    • AngularJs ng-include
    • Scope in AngularJS
    • AngularJS ng-if
    • AngularJS Number Filter
    • AngularJS Date Filter
    • AngularJS ng-class
    • AngularJS ng-model
    • AngularJS ng-disabled
    • AngularJS Custom Filter
    • AngularJS Validation
    • AngularJS Filters
    • Controllers in AngularJS
    • AngularJS Animations
    • AngularJS Services
    • AngularJS Events
    • AngularJS Versions
    • AngularJS Directives
    • AngularJS Unit Testing
    • AngularJS with Bootstrap
    • AngularJS UI Bootstrap
    • AngularJS Routing Example
  • Interview Question
    • Angular JS Interview Questions

AngularJS Number Filter

By Kinjal LodhaKinjal Lodha

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.

Syntax:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Using in HTML view

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

Using in Javascript file like controller, directive, helper

$filter(‘number’)(numberValue, franctionLength)

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,883 ratings)

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

This is a guide to AngularJS Number Filter. Here we also discuss the definition and How Number Filter works in AngularJS along with different examples and its code implementation. You may also have a look at the following articles to learn more –

  1. AngularJS ng-model
  2. AngularJS Custom Filter
  3. AngularJS ng-model
  4. AngularJS Filters
Popular Course in this category
Angular JS Training Program (9 Courses, 7 Projects)
  9 Online Courses |  7 Hands-on Projects |  64+ Hours |  Verifiable Certificate of Completion
4.5
Price

View Course
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • 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

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

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

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

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

EDUCBA Login

Forgot Password?

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

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

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

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

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

Let’s Get Started

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