Types of Filters in AngularJS

AngularJS provides you list of amazing inbuilt filters.  You don’t need to write any additional methods to get use of these filters features. Just add the filter in your expression and Enjoy the Benefits.

To know more about All other services and Custom filters please visit Complete Topics of AngularJS
The following Lists of Filters available in  AngularJS. Also you can create your own custom Filters, if you want.

1.Currency

Currency Filter formats your number as Currency.

Syntax:

{{ currency_expression | currency : symbol : fractionSize}}

Explanation:

currency_expression – your Number.

currency – is a Filter.

Symbol (optional) – Currency symbol or identifier to be displayed.

fractionSize (optional)  – Number of decimal points to be round the amount.

If you don’t prove any symbol, by default it will take “$”

 

2.Date

Date filter formats your string into date by the way of you requested.

Syntax:

{{ date_expression | date : format : timezone}}

Explanation:

date – is filter.

format  (optional) – what type of date format you needed. If not provided, Default ‘mediumDate’ will set mmm, d, y (e.g. Sep 3, 2010).

List of formats are as,

‘short’,’medium’, ‘yyyy-MM-dd HH:mm:ss’

 

3.filter

filter component is one of the important and most often used filter component in Angularjs.

It’s used for filtering subset of  items from our predefined arry/object and it returns an new array.

Syntax:

{{ filter_expression | filter : expression }}

Explanation:

filter_expression – is your expression (array).

filter – is a filter component.

expression – Your expression may be string or object.

The string expression tries to get new set of array from your predefined array which is matched to all elements of an array.

The Object expression tries to get new set of an array from your predefined array which is matched to particular elements of an array.

 

4.json

json filter allows you convert regular javascript object into json string.

Syntax:

{{ json_expression | json : spacing}}

Explanation:

json_expression – is your java script object.

json – is a filter.

Spacing (optional) – The number of spaces to use per indentation. If you don’t provide. the default is  2.

 

5.lowercase / uppercase

This filter used to convert your data into lowercase or uppercase.

Syntax:

{{ lowercase_expression | lowercase}}

{{ lowercase_expression | uppercase}}

 

6.orderBy

The orderBy filter used for ordered alphabetically or numerically based on the expression value. Here the order represents both Ascending and Descending.

Syntax:

{{ orderBy_expression | orderBy : expression : reverse}}

Explanation:

orderBy_expression – is your array.

orderBy – is a filter.

expression – is which element should be in order.

reverse – is a Boolean value which indicates Ascending or Descending order. If the value is true, the order will be descending. If the value is false, the order will be ascending.

 

Click Here to learn All topics of AngularJS – AngularJS All Topics