AngularJS Filters

Filters in AngularJS are used to format data displayed to the user in views. They help modify data without changing the underlying model, making them essential for data presentation.

Key Features of Filters

1. Formatting Data: Adjust the appearance of text, numbers, dates, etc.
2. Chainable: Multiple filters can be combined in a single expression.
3. Reusable: Filters can be used in controllers, services, or templates.
4. Customizable: You can create your own filters for specific needs.

 

Common Built-in Filters

1. currency

Formats a number into a currency string.

{{ price | currency }}
{{ price | currency:'€' }}

2. date

Formats a date object into a specific string format.

{{ currentDate | date:'yyyy-MM-dd' }}
{{ currentDate | date:'fullDate' }}

3. filter

Filters an array based on a search query.

<input ng-model="searchText" placeholder="Search...">
<ul>
  <li ng-repeat="item in items | filter:searchText">{{ item }}</li>
</ul>

4. json

Formats an object as a JSON string for readability.

<pre>{{ data | json }}</pre>

5. limitTo

Limits the number of items in an array or characters in a string.

{{ longText | limitTo:10 }}

6. lowercase

Converts text to lowercase.

{{ 'HELLO' | lowercase }}

7. uppercase

Converts text to uppercase.

{{ 'hello' | uppercase }}

8. number

Formats a number to a specific number of decimal places.

{{ 1234.5678 | number:2 }}

9. orderBy

Sorts an array based on a specific key.

<ul>
  <li ng-repeat="item in items | orderBy:'name'">{{ item.name }}</li>
</ul>

 

Using Filters in Controllers

Filters can also be used programmatically within controllers using the $filter service.

Example:

app.controller('myController', function($scope, $filter) {
  var currencyFilter = $filter('currency');
  $scope.formattedPrice = currencyFilter(123.45, '€');
});

 

Creating Custom Filters

You can define your own filters to suit specific requirements.

Example: Custom Filter to Reverse a String

app.filter('reverse', function() {
  return function(input) {
    return input.split('').reverse().join('');
  };
});

Usage:

{{ 'AngularJS' | reverse }}
<!-- Output: SJralugnA -->

 

Summary

AngularJS filters provide a flexible way to format and display data in views, improving the user interface. With a variety of built-in filters and the ability to create custom ones, they make AngularJS applications more dynamic and user-friendly. Filters can be used in templates or controllers, depending on the use case.