AngularJS
ng-include in AngularJS: How to include HTML File [Example]
By default, HTML does not provide the facility to include client-side code from other files. It's...
A Filter in AngularJS helps to format the value of an expression to display to the user without changing the original format. For example, if you want your string in either lowercase or uppercase, you can do it using filters. There are built-in filters such as 'lowercase', 'uppercase', which can retrieve the lowercase and uppercase output accordingly.
Similarly, for numbers, you can use other filters.
During this tutorial, we will see the different standard built-in filters available in Angular.
In this tutorial, you will learn-
This filter takes on a string output and formats the string and displays all the characters in the string as lowercase.
Let's look at an example of AngularJS filters with the AngularJS tolowercase option.
In the below example, we will use a controller to send a string to a view via the scope object. We will then use a filter in the view to convert the string to lowercase.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> <br> This tutorial is {{tutorialName | lowercase}} </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope){ $scope.tutorialName ="Angular JS"; }); </script> </body> </html>
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
From the output
This filter is similar to the lowercase filter; the difference is that takes on a string output and formats the string and displays all the characters in the string as uppercase.
Let's look at an example of capitalize filter AngularJS with the lowercase option.
In the below AngularJS capitalize example, we will use a controller to send a string to a view via the scope object. We will then use a filter in the view to convert the string to uppercase.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> <br> This tutorial is {{tutorialName | uppercase}} </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope){ $scope.tutorialName ="Angular JS"; }); </script> </body> </html>
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
From the output,
This filter formats a number and can apply a limit to the decimal points for a number.
Let's look at an example of AngularJS filters with the number option.
In the example below,
We wanted to showcase how we can use the number filter to format a number to display with a restriction of 2 decimal places.
We will use a controller to send a number to a view via the scope object. We will then use a filter in the view to apply the number filter.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorialID is {{tutorialID | number:2}} </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope){ $scope.tutorialID =3.565656; }); </script> </body> </html>
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
From the output,
This filter formats a currency filter to a number.
Suppose, if you wanted to display a number with a currency such as $, then this filter can be used.
In the below example we will use a controller to send a number to a view via the scope object. We will then use a filter in the view to apply the current filter.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial Price is {{tutorialprice | currency}} </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope){ $scope.tutorialprice =20.56; }); </script> </body> </html>
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
From the output
This filter formats a JSON like input and applies the AngularJS JSON filter to give the output in JSON.
In the below example we will use a controller to send a JSON type object to a view via the scope object. We will then use a filter in the view to apply the JSON filter.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | json}} </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope){ $scope.tutorial ={TutorialID:12,tutorialName:"Angular"}; }); </script> </body> </html>
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
From the output,
By default, HTML does not provide the facility to include client-side code from other files. It's...
We have prepared the most frequently asked Angular interview questions and answers that acquaint...
Nowadays, everyone would have heard about the "Single Page Applications". Many of the well-known...
What is Controller in AngularJs? A Controllers in AngularJs takes the data from the View,...
What is Angular JS? AngularJS is an open-source front-end web framework based on JavaScript to build...
Sometimes the built-in filters in Angular cannot meet the needs or requirements for filtering...