---

Search posts under AngularJS:

---

Filters in AngularJS

What are filters in AngularJS?

Filter is used to format the value of an expression to display in desired format. It can be used in View templates, controllers or services. We can also define our own filter in AngularJS.

Syntax :

{{ data | filter:options}}

1. currency – is used to filter numeric data into localized format, if no prefix is applied
2. number – format a number as text. Number is rounded to decimal places and places “,” after each third digit
3. uppercase – is used to convert the data into upper case
4. lowercase – is used to convert the data into lower case
5. date: ‘MM/dd/yyyy h:mma’ – used to convert the timestamp into the format we want
6. limitTo:10 – used to write number of characters from the string or number of items from an array.
   {{‘Sheo Narayan’, limitTo:4 }}  will output "Sheo"
   <li data-ng-repeat="username in usernames | limitTo: 2">{{username}}</li> - will output 2 characters of the username
7. orderBy – allows us to sort the product by name.
8. json – converts a JavaScript object to json.

We shall learn more about filters in coming posts.

    <div ng-app>
        <p>All upper: {{'sheonarayan' | uppercase}}</p>
        <p>Limit to 4 : {{'Sheo Narayan' | limitTo:4 }}</p>
        <p>All lower: {{'SHEONARAYAN' | lowercase }}</p>
        <p>Currency: {{'2552.25' | currency }}</p>                                
        <p>Number: {{'2552' | number }}</p>
    </div>