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-
What is Filter in AngularJS? AngularJS Custom Filter How to Create Custom Filter in AngularJS Lowercase Filter in AngularJS Lowercase Filter in AngularJS Uppercase Filter in AngularJS Number Filter in AngularJS Currency Filter in AngularJS JSON Filter in AngularJS
How to Create Custom Filter in AngularJS
In the below custom filter AngularJS example, we are going to pass a string to the view from the controller via the scope object, but we don’t want the string to be displayed as it is. We want to ensure that whenever we display the string, we will pass a custom filter in AngularJS, which will append another string and display the completed string to the user.
Code Explanation:
Here we are passing a string “Angular” in a member variable called tutorial and attaching it to the scope object. Angular provides the filter service which can be used to create our custom filter. The ‘Demofilter’ is a name given to our filter. This is the standard way in which custom filters in AngularJS are defined wherein a function is returned. This function is what contains the custom code to create the custom filter. In our function, we are taking a string “Angular” which is passed from our view to the filter and appending the string “Tutorial” to this. We are using our Demofilter on our member variable which was passed from the controller to the view.
If the code is executed successfully, the following Output will be shown when you run your code in the browser. Output:
From the output,
It can be seen that our custom filter has been applied and The word ‘Tutorial’ has been appended at the end of the string, which was passed in member variable tutorial.
Lowercase Filter in AngularJS
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 to lowercase 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.
Code Explanation:
Here we are passing a string, which is a combination of lowercase and uppercase characters in a member variable called “tutorialName” and attaching it to the scope object. The value of the string being passed is “AngularJS”. We are using the member variable “tutorialName” and putting a filter symbol (|) which means that the output needs to be modified by using a filter. We then use the lowercase keyword to say to use the built-in filter to output the entire string in lowercase.
If the code is executed successfully, the following Output will be shown when you run your code in the browser. Output:
From the output
It can be seen that the string “AngularJS” which was passed in the variable tutorialName which was a combination of lowercase and uppercase characters has been executed. After execution, the final output is in lowercase as shown above.
Uppercase Filter in AngularJS
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.
Code Explanation:
Here we are passing a string which is a combination of lowercase and uppercase characters “Angular JS” in a member variable called “tutorialName” and attaching it to the scope object. We are using the member variable “tutorialName” and putting a filter symbol (|), which means that the output needs to be modified by using a filter. We then use the uppercase keyword to say to use the built-in filter to output the entire string in uppercase.
If the code is executed successfully, the following Output will be shown when you run your code in the browser. Output:
From the output,
It can be seen that the string which was passed in the variable tutorialName which was a combination of lowercase and uppercase characters has been outputted in all uppercase.
Number Filter in AngularJS
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.
Code Explanation:
Here we are passing a number with a larger number of decimal places in a member variable called tutorialID and attaching it to the scope object. We are using the member variable tutorialID and putting a filter symbol (|) along with the number filter. Now in number:2, the two indicates that the filter should restrict the number of decimal places to 2.
If the code is executed successfully, the following Output will be shown when you run your code in the browser. Output:
From the output,
It can be seen that the number which was passed in the variable tutorialID which had a large number of decimal points has been limited to 2 decimal places because of the number: 2 filters which was applied.
Currency Filter in AngularJS
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.
Code Explanation:
Here we are passing a number in a member variable called tutorialprice and attaching it to the scope object. We are using the member variable tutorialprice and putting a filter symbol (|) along with the currency filter. Note that the currency which is applied depends on the language settings which are applied to the machine.
If the code is executed successfully, the following Output will be shown when you run your code in the browser. Output:
From the output
It can be seen the currency symbol has been appended to the number which was passed in the variable tutorialprice. In our case, since the language settings are English (United States), the $ symbol is inserted as the currency.
JSON Filter in AngularJS
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.
Code Explanation:
Here we are passing a number in a member variable called “tutorial” and attaching it to the scope object. This member variable contains a JSON type string of Tutorial ID:12, and TutorialName:”Angular”. We are using the member variable tutorial and putting a filter symbol (|) along with the JSON filter.
If the code is executed successfully, the following Output will be shown when you run your code in the browser. Output:
From the output,
It can be seen that the JSON like a string is parsed and displayed a proper JSON object in the browser.
Summary:
Filters are used to change the way the output is displayed to the user. Angular provides built-in filters such as the lowercase and uppercase filters to change the output of strings to lower and uppercase respectively. There is also a provision for changing the way numbers are displayed by using the number filter by specifying the number of decimal points to be displayed in the number. One can also use the currency filter to append the currency symbol to any number. If there is a requirement to have JSON specific output, angular also provides the JSON filter for filtering any JSON like string into JSON format. If there is a requirement that is not met by any of the filters defined in angular, then you can create your custom filter and add your custom code to determine the type of output you want from the filter.
