---
title: "How do you use filters in AngularJS to manipulate data?"  
description: "How do you use filters in AngularJS to manipulate data?"  
author: "Revati S Misra"  
published: 2023-04-18  
updated: 2023-11-22  
canonical: https://www.mindstick.com/forum/157877/how-do-you-use-filters-in-angularjs-to-manipulate-data  
category: "angular js"  
tags: ["angular js", "angularjs development"]  
reading_time: 3 minutes  

---

# How do you use filters in AngularJS to manipulate data?

How do you use [filters in AngularJS](https://www.mindstick.com/forum/160772/what-are-filters-in-angularjs) to manipulate [data](https://www.mindstick.com/articles/13050/salesforce-aiming-to-dominate-predictive-analytics-with-data-science)?

## Replies

### Reply by Aryan Kumar

In [AngularJS](https://www.mindstick.com/forum/33926/use-angularjs-without-scope-in-mvc), [filters](https://www.mindstick.com/forum/156119/how-to-use-filters-in-angularjs) are used to format or manipulate data in the view. They can be applied to expressions in the HTML to transform the data before it's displayed. Filters are often used for tasks such as formatting dates, sorting arrays, converting text to uppercase or lowercase, and more.

Here's how you can use filters in AngularJS:

### Basic Syntax:

```plaintext
{{ expression | filter:argument1:argument2:... }}
```

- **expression:** The data you want to filter.
- **filter:** The name of the filter to apply.
- **arguments:** Optional arguments that can be passed to the filter.

### Examples:

1. **Uppercase Filter:**

```plaintext
<!-- Converts text to uppercase -->
<p>{{ 'hello' | uppercase }}</p> <!-- Output: HELLO -->
```

1. **Lowercase Filter:**

```plaintext
<!-- Converts text to lowercase -->
<p>{{ 'WORLD' | lowercase }}</p> <!-- Output: world -->
```

1. **Number Filter:**

```plaintext
<!-- Formats a number with specified decimal places -->
<p>{{ 12345.6789 | number:2 }}</p> <!-- Output: 12,345.68 -->
```

1. **Date Filter:**

```plaintext
<!-- Formats a date -->
<p>{{ today | date:'yyyy-MM-dd HH:mm:ss' }}</p>
```

In the controller:

```plaintext
// Assuming 'today' is a Date object
$scope.today = new Date();
```

1. **Filtering Arrays:**

```plaintext
<!-- Filters an array based on a specified criteria -->
<ul>
  <li ng-repeat="item in items | filter:'searchText'">{{ item.name }}</li>
</ul>
```

```plaintext
$scope.items = [
  { name: 'Apple', searchText: 'fruit' },
  { name: 'Carrot', searchText: 'vegetable' },
  // ...
];
```

### Custom Filters:

You can also create custom filters by registering a new filter function using the **filter** method in your AngularJS module.

```plaintext
// Example of a custom filter named 'reverse'
angular.module('myApp').filter('reverse', function() {
  return function(input) {
    return input.split('').reverse().join('');
  };
});
```

```plaintext
<!-- Using the custom 'reverse' filter -->
<p>{{ 'hello' | reverse }}</p> <!-- Output: olleh -->
```

### Chaining Filters:

Filters can be chained to perform multiple transformations on the data.

```plaintext
<p>{{ price | currency | uppercase }}</p>
```

In this example, the **currency** filter formats the price, and then the **uppercase** filter converts it to uppercase.

### Common Use Cases:

## Formatting Numbers and Currencies:

- Use **number** and **currency** filters to format numeric values.

## Date Formatting:

- The **date** filter is useful for formatting date objects into human-readable strings.

## Text Transformations:

- **uppercase** and **lowercase** filters can be used to change the case of text.

## Filtering and Sorting Lists:

- The **filter** and **orderBy** filters are helpful for filtering and sorting arrays or lists.

## Custom Transformations:

- Create custom filters for specific data transformations that are not covered by built-in filters.

By leveraging filters in AngularJS, you can easily manipulate and format data in a clean and declarative manner, enhancing the presentation of your application's user interface.


---

Original Source: https://www.mindstick.com/forum/157877/how-do-you-use-filters-in-angularjs-to-manipulate-data

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.