Built-In And Custom AngularJS Filters With Examples

Built-In And Custom #AngularJS Filters With Examples | @CsharpCorner

  • Syntax

    Output

    “string”

    Plunker- lowercase AngularJS provides couple of built-in filters through which you can format your data.

  • Example Output Plunker- number

    Currency

    The Currency filter is used to format numbers into currency.

  • Example

    Output Plunker- date

    JSON The json filter is used for debugging purpose and prints the JavaScript object as JSON string Syntax

    spacing is optional and used for indentation purpose.

  • Example

    {{ { ‘name’ : ‘abc’ } | json }}

    Output

    { “name”: “abc” }

    Plunker- json

    limitTo

    limitTo filter is used to limit your data upto specific length.

  • Syntax

    Plunker- Custom Filter Example Custom filters can be created easily by using filter function of Angular module.

This article will demonstrate built-in as well as custom AngularJS Filters with examples on Plunker Editor.

@DBaker007: Built-In And Custom #AngularJS Filters With Examples | @CsharpCorner

AngularJS provides couple of built-in filters through which you can format your data. Their syntaxes and usage scenerios are as follow.

The Lowercase filter is used for transforming the characters of a string into lowercase. It takes a piece of string as an input and converts it into lowercase string.

“string”

The Uppercase filter is used for transforming the characters of a string into uppercase. It takes a piece of string as an input and converts it into uppercase string.

Date filter is used to format dates into string based on specified format.

{{ { ‘name’ : ‘abc’ } | json }}

{ “name”: “abc” }

orderBy filter is used with ngRepeat directive and orders data by a certain field.

[ { id : ‘1’ } , { id : ‘2’ } ]

limitTo filter is used to limit your data upto specific length. It creates a new string or array of elemetns of specified length.

{{ ‘abcdefghjildjkdf ‘ | limitTo : 3 }}

Filter is used with ngRepeat directive, and filters records for specified expression. It selects subset of array based on expression, and returns it as a new array.

Expression can be a string, object, or a function.

Custom filters can be created easily by using filter function of Angular module. Filter function takes two parameters – the first one is name of the filter and the second one is a function. This function itself returns a function. The inner function takes parameters for inputs on whcih you want to apply formatting, and contains logic to modify input values.

Built-In And Custom AngularJS Filters With Examples

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.