--- title: "Filters in AngularJS" description: "Filters in AngularJS are used to format the data displayed to the user. They can be used in view templates, controllers, or services to modify data be" author: "Ravi Vishwakarma" published: 2024-06-24 updated: 2024-06-24 canonical: https://www.mindstick.com/blog/304416/filters-in-angularjs category: "angular js" tags: ["web development", "angular js", "front-end development"] reading_time: 3 minutes --- # Filters in AngularJS **Filters** in [AngularJS](https://www.mindstick.com/articles/13081/advantages-disadvantages-of-angularjs-is-that-ideal-for-your-project) are used to format the data displayed to the user. They can be used in view [templates](https://www.mindstick.com/articles/12874/crucial-benefits-of-using-powerpoint-templates-in-your-business-presentations), [controllers](https://www.mindstick.com/forum/155773/how-asynchronous-controllers-work-in-asp-dot-net-mvc), or [services](https://www.mindstick.com/articles/13111/distinctions-of-iiot-services-how-its-helps-brands) to modify data before presenting it. Filters are useful for **formatting dates**, **numbers**, **currencies**, converting text to **uppercase/lowercase**, and more. #### Using Filters **In Templates**: Filters can be applied directly in the HTML templates using the pipe (`|`) character. **Syntax:** `{{ expression | filterName:parameter1:parameter2 }}` **Example:** `{{ name | uppercase }}` **In Controllers**: Filters can be injected into controllers and used within [JavaScript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) code. ```javascript app.controller('myCtrl', function($scope, $filter) { $scope.name = 'angularjs'; $scope.uppercaseName = $filter('uppercase')($scope.name); }); ``` #### Built-in Filters AngularJS provides several built-in filters: **[currency](https://www.mindstick.com/articles/311850/currency-wars-what-they-are-and-how-they-work)**: Formats a number as a currency (default is USD). - Example: `{{ amount | currency:'EUR' }}` **date**: Formats a date to a specified format. - Example: `{{ today | date:'fullDate' }}` **filter**: Selects a subset of items from an array based on criteria. - Example: `{{ users | filter:{name:'John'} }}` **json**: Formats an object as a JSON string. - Example: `{{ user | json }}` **limitTo**: Limits an array or string to a specified number of [elements](https://www.mindstick.com/forum/1440/wpf-button-with-multiple-text-elements) or characters. - Example: `{{ message | limitTo:10 }}` **lowercase**: Converts a string to lowercase. - Example: `{{ name | lowercase }}` **number**: Formats a number to a specified number of [decimal places](https://www.mindstick.com/forum/33881/round-double-type-variable-to-two-decimal-places-in-c-sharp). - Example: `{{ pi | number:2 }}` **orderBy**: Orders an array by an [expression](https://www.mindstick.com/articles/1861/sqlite-expressions). - Example: `{{ users | orderBy:'name' }}` **uppercase**: Converts a string to uppercase. - Example: `{{ name | uppercase }}` #### Custom Filters You can also create custom filters to perform specific formatting tasks. **Creating a [Custom Filter](https://www.mindstick.com/interview/34020/how-do-filters-work-in-angularjs-and-can-you-create-a-custom-filter)**: ```javascript app.filter('reverse', function() { return function(input) { if (!input) return ''; return input.split('').reverse().join(''); }; }); ``` **Using the Custom Filter**: ```javascript

{{ 'AngularJS' | reverse }}

``` **Example of filters.** ```javascript

Built-in Filters

Currency: {{ amount | currency }}

Date: {{ today | date:'fullDate' }}

Uppercase: {{ name | uppercase }}

Filtered Users: {{ users | filter:{name:'John'} | json }}

Limited Text: {{ name | limitTo:4 }}

Custom Filter

Reversed: {{ name | reverse }}

``` --- Original Source: https://www.mindstick.com/blog/304416/filters-in-angularjs Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.