---
title: "How to use Filters in AngularJS"  
description: "How to use Filters in AngularJS"  
author: "Anonymous User"  
published: 2020-11-27  
updated: 2020-11-27  
canonical: https://www.mindstick.com/forum/156119/how-to-use-filters-in-angularjs  
category: "angular js"  
tags: ["angular js"]  
reading_time: 3 minutes  

---

# How to use Filters in AngularJS

How to use [Filters in AngularJS](https://www.mindstick.com/forum/157877/how-do-you-use-filters-in-angularjs-to-manipulate-data)

## Replies

### Reply by Anonymous User

Hi, here we will demonstrate a simple an example of [AngularJS](https://www.mindstick.com/forum/33926/use-angularjs-without-scope-in-mvc) Filter.

AngularJS [Filters](https://www.mindstick.com/forum/155780/explain-different-filters-in-asp-dot-net-mvc) format the value of an expression for display to the user. Filters can be added to expressions by using the pipe character |. Following is the list of commonly used filters.

## UPPERCASE FILTER

Ther uppercase filter to an expression using pipe character it format strings to upper case. Below we've added uppercase filter to print name in all capital letters.

```
Enter  Name: <input type="text" ng-model="User.Name">
Name in Upper Case: {{User.Name | uppercase}}
```

## LOWERCASE FILTER

Ther lowercase filter to an expression using pipe character it format strings to lower case. Below we've added lowercase filter to print name in all lowercase letters.

```
Enter  Name: <input type="text" ng-model="User.Name">
Name in Upper Case: {{User.Name | lowercase }}
```

## Currency filter

The currency filter to an expression using pipe character it formats a number as currency. Below we've added currency filter to print fee using currency format.

```
ENTER  AMOUNT: <INPUT TYPE="TEXT" NG-MODEL="USER.FEE">
FEES: {{USER.FEE | CURRENCY}}
```

## filter filters

The filter filters selects a subset of an array List.The filter filters can only be used on arrays, and it returns an array containing only the matching records. . Below we've added Filter filters to display only matching records.

```
<b> Filter</b> <ul>
<li ng-repeat="user in User.users  |filter:User.Name">
{{ user.name + ', marks:' + user.marks }}
</li></ul>
```

## orderby filter

The orderby filter can return an arrays, it is use for sorting array record. Below we've added orderby filter to display sorting records.

```
<b> OrderBy</b><ul> <li ng-repeat="user in User.users  |orderBy:'marks'">
{{ user.name + ', marks:' + user.marks }}
</li></ul
```

## Simple Example:

```
<script src="~/Scripts/jquery-3.1.1.js"></script><script src="~/Scripts/angular.js"></script><h2>AngularJS Application</h2><div ng-app="MyApp" ng-controller="MyController">    Enter Name: <input type="text" ng-model="User.Name"><br><br>    Enter Amount: <input type="text" ng-model="User.fee"><br><br>    Name in Lower Case: {{User.Name | uppercase}} <br /> <br />     Name in Lower Case: {{User.Name | lowercase}} <br /> <br />     fees: {{User.fee | currency}}<br /> <br />
    <b> OrderBy</b>    <ul>        <li ng-repeat="user in User.users  |orderBy:'marks'">
            {{ user.name + ', marks:' + user.marks }}
        </li>    </ul>    <br /> <br />    <b> Filter</b>    <ul>        <li ng-repeat="user in User.users  |filter:User.Name">            {{ user.name + ', marks:' + user.marks }}
        </li>    </ul></div><script>    var mainApp = angular.module("MyApp", []);
    mainApp.controller('MyController', function ($scope) {
        $scope.User = {            Name: "",            fee: "",            users: [                  { name: 'aditya', marks: 70 },                  { name: 'pawan', marks: 80 },                  { name: 'suraj', marks: 65 }            ],        };    });
</script>
```

## Output:

![How to use Filters in AngularJS](https://www.mindstick.com/mindstickforums/abf21b5a-e6bd-4f71-9768-742eb555466d/images/df991f8a-fc08-4fb0-b333-a498b107ec92.png) **\**

I hope it will help to you.


---

Original Source: https://www.mindstick.com/forum/156119/how-to-use-filters-in-angularjs

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