Quick Contact


    AngularJS Filter

    AngularJS filter is a tool, which we can use to format the data. With this filter, the user can see and modify according to the requirement. It is added in angular to format the data that is being displayed on the view part.

    Syntax of Filter

    With pipe character (|), we can add filters in angularJS.

    Filters can club with the expression as well as a directive.

    Syntax:

    {{expression| name_of_filter}}

    Example:

    {{name | uppercase}}

    Enroll Yourself in Live Classes For Angular Tutorials.

    Here, a name is the expression and uppercase is the built-in filter provided by angular. It converts the name in uppercase in view part.

    Use a filter in AngularJS

    When we want to display the data in view part in a particular format in that scenario we can use AngularJS filter. We can display the data in the uppercase format, lowercase format etc. In whatever format, we entered the text but it can easily get displayed in any format by angular as per the type of filter used. AngularJS Filters can change the way of displaying the output.

    AngularJS Filter in View Template

    Filters are applied on expression to refrain the input. We can apply the AngualrJS Filter in a view template. Also, we can apply a filter on the result obtained by another filter. Chaining is the phenomenon when filters are applied to the already filtered content.

    Syntax:

    {{ expression | filter1 | filter2 | … }}

    AngularJS Filters have arguments.
    Syntax:

    {{ expression | filter:argument1:argument2:… }}

    Question:-When will filter get execute?
    Ans-Whenever the inputs have changed in the template, the filter gets to execute.
    Types of Filters in AngularJS

    These are the following built-in filters, let’s discuss them one by one:

    These are the following built-in filters, let’s discuss them one by one:
    Uppercase

    Uppercase Filter use to convert the string into an uppercase string.

    If Uppercase filter is used then the string that is taken as an input in any format is formatted and gets displayed to the user in an uppercase format as an output.

    Syntax:

    {{expression | uppercase}}

    Example:
    	< !DOCTYPE html>
    	< html>
    	< head>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">< /script>
    	< /head>
    	< bodyng-app >
    	< h1>AngularJS Uppercase Filter: < /h1>
    	< div ng-init="firstName='data'; lastName='flair'">
    	Upper case: {{firstName + ' ' +lastName| uppercase}}< /div>
    	< /body>
    	< /html>
    	
    Output
    AngularJS Uppercase Filter:

    Upper case: DUCAT INDIA

    Lowercase

    Lowercase Filter in AngularJS uses to convert the string into a lowercase string.

    If a lowercase filter is used then the string that is taken as an input in any format is formatted and gets displayed to the user in the lowercase format as an output.

    Syntax:

    {{expression | lowercase}}

    Example:
    	< !DOCTYPE html>
    	< html>
    	< head>
    	< script>
    	src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">< /script>
    	< /head>
    	< bodyng-app >
    	< h1>AngularJS Lowercase Filter: < /h1>
    	< div ng-init="firstName='DaTa'; lastName='FlaiR'">
    	Upper case: {{firstName + ' ' +lastName| lowercase}}< /div>
    	< /body>
    	< /html>
    	
    Output:
    AngularJS Lowercase Filter:

    Lower case: ducat india

    Currency

    Currency filter is used to change the convert the number in the specified currency. In case no symbol of currency is specified then by default the symbol for current locale is used.

    Syntax:

    {{expression |currency :’currency_symbol’:’fraction’}}

    Example:
    	< !DOCTYPE html>
    	< html>
    	< head>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">< /script>
    	< /head>
    	< bodyng-app >
    	Enter Amount:< input type="number"ng-model= "price">< br>
    	The amount is: {{price |currency }}
    	< /body>
    	< /html>
    	
    Output

    Enter Amount:

    The amount is:

    When you enter text in the textbox the output will be

    Enter Amount:

    The amount is: $5.00

    Filter

    It is applied only on array elements. A particular element is selected from an array based on certain condition and a new array is created from the existing array.

    Syntax:

    {{ expression| filter :filter_criteria}}

    Example:
    	< !DOCTYPE html>
    	< html>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script>
    	< body>
    	< div ng-app="myApp"ng-controller="namesCtrl">
    	< ul>
    	< li ng-repeat="x in names | filter : 'a'">
    	{{ x}}
    	< /li>
    	< /ul>
    	< /div>
    	< script>
    	angular.module('myApp', []).controller('namesCtrl', function($scope){
    	$scope.names = [
    	'Sakshi', 
    	'Simran', 
    	'Ajay', 
    	'Navi', 
    	'Angad'
    	]; 
    	}); 
    	< /script>
    	< p>The names containing the letter "s".< /p>
    	< /body>
    	< /html>
    	
    Output:

    Sakshi

    Simran

    The names containing the letter “s”.

    Orderby

    It is used to sort the data either in ascending or in descending order.

    Syntax:

    {{ expression|orderBy:predicate_expression: reverse}}

    Date

    Date filter in AngularJS use to convert the date into a string according to the specified date format.

    Syntax:

    {{date_expression|date :’format’}}

    The various formats are:

    YYYY,MM,DD,Detc

    Example:
    	< !DOCTYPE html>
    	< html>
    	< head>
    	< scriptsrc="~/Scripts/angular.js">< /script>
    	< /head>
    	< bodyng-app>
    	< div ng-init="Date = 423234234888 ">
    	Default date: {{Date| date}}< br />
    	Year: {{Date | date:'yyyy'}}< br />
    	< /div>
    	< /body>
    	< /html>
    	
    Output:

    Default date: May 31, 2020

    Year:2020

    Number

    It is used to format the data or a numerical value taken as an input. It can add a comma or specified fraction size in it. In case the number expression doesn’t contain valid numeric data in that case number filter display an empty string.

    Syntax:

    {{number_expression|number:fractionSize}}

    Example
    	< !DOCTYPE html>
    	< html>
    	< head>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">< /script>
    	< /head>
    	< bodyng-app >
    	< h1>AngularJS Number Filter Demo: < /h1>
    	Enter Price: < input type="number"ng-model="Price" />< br />
    	100000| number = {{100000| number}}< br />
    	Price | number = {{Price | number}}< br />
    	Price | number:3 = {{Price | number:3}}< br />
    	Price | number = < span ng-bind="Price | number">< /span>
    	< /body>
    	< /html>
    	
    Output

    AngularJS Number Filter Demo:

    Enter Price:

    100 | number =

    Price | number =

    Price | number:3 =

    Price | number =

    When you enter a value in the text field then the output will be

    AngularJS Number Filter Demo:

    Enter Price: 8

    100 | number = 100

    Price | number = 8

    Price | number:3 = 8.000

    Price | number = 8

    Enroll Yourself in Live Classes For Angular Training Online.

    Copyright 1999- Ducat Creative, All rights reserved.