AngularJS Filters - What are the filters in AngularJS?
An angularJs uses many filters to get data as per user requirements. It makes it easier to understand and interact with the web application. The filter uses to format data of the user input or database to show as per requirement.
The following table shows the AngularJS filter and its description in detail.
|
Filter |
Description |
|
currency |
This filter uses to convert a number to a currency format. |
|
date |
This filter uses to convert a date into the required format. |
|
filter |
This filter uses to select a subset of the value from the given array. |
|
JSON |
This filter uses to convert an object to a JSON string. |
|
limit |
It limits an array/string to a specified number of elements/characters. |
|
lowercase |
This filter uses to convert a string to a lower case format. |
|
number |
This filter uses to convert a number to a string format. |
|
order by |
This filter uses to convert an array value in ordered format by an expression. |
|
uppercase |
This filter uses to convert a string to upper case format. |
Syntax
The filter uses to output HTML elements like expressions for formatting data. This output HTML element contains a value and standing line or bar.
The following syntax helps to use any AngularJS filter with value in the expression.
|
{{ value | AngularJS_filter}} |
The following syntax helps to use any AngularJS filter with value in the directive.
|
<li ng-repeat="x in places | orderBy:'country'"> {{ x.place }} </li> |
Examples
The following examples show how to filter uses in different AngularJS value functions.
Example#1: The AngularJS filter with Basic input data.
|
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="firstApp" ng-controller="firstCtroller"> <p> Lower Value: <b>{{ fstName | lowercase }} </b></p> <p> UpperCase Value: <b>{{ secondName | uppercase }} </b></p> <p> Currency Value: <b>{{ Cost | currency }} </b></p> </div> <script> angular.module('firstApp', []).controller('firstCtroller', function($scope) { $scope.fstName = "HaPPY", $scope.secondName = "Holiday" $scope.Cost = 88; }); </script> </body> </html> |
Output
 |
Example#2: The AngularJS filter with single dimensional input data array.
|
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="firstApp" ng-controller="firstCtroller"> <h5> The filter shows "n" keywords Country:</h5> <ul> <li ng-repeat="x in places | filter : 'n'"> {{ x }} </li> </ul> </div> <script> angular.module('firstApp', []).controller('firstCtroller', function($scope) { $scope.places = [ 'India', 'Mexico', 'Germany', 'Canada', 'America', 'England', 'Koria', 'Japan', ]; }); </script> </body> </html> |
Output
 |
Example#3: The AngularJS filter with two-dimensional input data array
|
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="firstApp" ng-controller="firstCtroller"> <h5> The filter shows orderby values using <br> country keywords:</h5> <ul> <li ng-repeat="x in places | orderBy:'country'"> {{ x.student + ', ' + x.country }} </li> </ul> </div> <script> angular.module('firstApp', []).controller('firstCtroller', function($scope) { $scope.places = [ {student:'Sita',country:'India'}, {student:'John',country:'Germany'}, {student:'Ram',country:'Mexico'}, {student:'Sham',country:'Iran'}, {student:'Alex',country:'Koria'}, {student:'Radha',country:'India'}, {student:'Karl',country:'Japan'}, {student:'John',country:'UK'}, {student:'Tia',country:'America'} ]; }); </script> </body> </html> |
Output
 |
Summary
The AngularJS filter helps to show data on the output page per user requirement. We can convert, sort, and display data in a particular format. The filter makes it easy and understandable to unknown and known users