Understanding Filters in AngularJS

Filters help us in changing/modifying the data. AngularJS provides us a number of inbuilt filters; along with the capability to create our own custom filters. A filter is similar to a factory or service in many ways but comes with an added advantage of behaving on a global scope, once created. We can invoke a filter on both the data binding in your html or directly inside of our controller or directive using the $filter service.

Before we get into inbuilt filters and how to create our own filters, lets understand the anatomy of a filter in AngularJS.

Anatomy of an AngularJS Filter

To declare a filter, we pass in two parameters to app.filter. The first parameter is the name of the filter and second is a function that will return another function that does the actual work of the filter. In the return function, we must pass in a single parameter which will be the data we will work on. We have the ability to support multiple other parameters that can be passed into the filter optionally.

Inbuilt Filters

AngularJS comes with nine in-built filters:

  1. uppercase

    Converts string to uppercase.

    In HTML:
    {{ uppercase_expression | uppercase}}

    In JavaScript:
    $filter(‘uppercase’)()

    Example:

  2. lowercase

    Converts a string to lowercase

    In HTML:
    {{ lowercase_expression | lowercase}}

    In JavaScript:
    $filter(‘lowercase’)()

    Example:

  3. limitTo

    Creates a new array or string containing only a specified number of elements. The elements are taken from either the beginning or the end of the source array, string or number, as specified by the value and sign (positive or negative) of limit

    In HTML:
    {{ limitTo_expression | limitTo : limit : begin}}

    In JavaScript:
    $filter(‘limitTo’)(input, limit, begin)

    Of the three parameters, input is an array, string or number to be limited. limit is the length of the returned array or string. begin is the index at which to begin limitation

    Example:

  4. orderBy

    Orders the array based on provided criteria.

    In HTML:
    {{ orderBy_expression | orderBy : expression : reverse : comparator}}

    In JavaScript:
    $filter(‘orderBy’)(collection, expression, reverse, comparator)

    Example:

  5. json

    Allows you to convert a JavaScript object into JSON string.This filter is mostly useful for debugging. When using the double curly notation the binding is automatically converted to JSON.

    In HTML:
    {{ json_expression | json : spacing}}

    In JavaScript:
    $filter(‘json’)(object, spacing)

    Spacing is the number of spaces to use per indentation, defaults to 2.

    Example:

  6. date

    Formats date to a string based on the requested format.

    In HTML:
    {{ date_expression | date : format : timezone}}

    In JavaScript:
    $filter(‘date’)(date, format, timezone)

    Example:

    A comprehensive list of all date formats can be found on the AngularJS website

  7. number

    Formats a number as text.

    In HTML:
    {{ number_expression | number : fractionSize}}

    In JavaScript:
    $filter(‘number’)(number, fractionSize)

    If the input is null or undefined, it will just be returned. If the input is infinite (Infinity or -Infinity), the Infinity symbol ‘∞’ or ‘-∞’ is returned, respectively. If the input is not a number an empty string is returned. fractionSize is the number of decimal places to round the number to.

    Example:

  8. currency

    Formats a number as a currency. When no currency symbol is provided, default symbol for current locale is used.

    In HTML:
    {{ currency_expression | currency : symbol : fractionSize}}

    In JavaScript:
    $filter(‘currency’)(amount, symbol, fractionSize)

    fractionSize is the number of decimal places to round the amount to, defaults to default max fraction size for current locale.

    Example:

  9. filter

    Selects a subset of items from array and returns it as a new array.

    In HTML:
    {{ filter_expression | filter : expression : comparator : anyPropertyKey}}

    In JavaScript:
    $filter(‘filter’)(array, expression, comparator, anyPropertyKey)

    Example:

Play with the code above in the Plunker here

In summary,

CurrencyUsed to format a number as currency.
DateUsed to set date format.
FilterUsed to filter or search an item in an array.
JsonUsed to convert JavaScript object to Json object.
LimitToUsed to extract subset of an array with specified number of items.
LowercaseUsed to convert a string to lower case.
NumberUsed to format a number as string.
OrderByUsed to set array order.
UppercaseUsed to convert a string to upper case.

That’s all for this post. In the next post, we shall dive into creating custom filters.

  • JimTheMan

    Nice post! It would be nice to have some code snippet examples of the JavaScript way to use filters though.

    • Thanks Jim. Planning a separate post for that.

Top