---
title: "AngularJs Filters"  
description: "Hi everyone in this blog I’m explaining about Angularjs Filters.Introduction:Filters are used to change modify the data and can be clubbed in expressi"  
author: "Anonymous User"  
published: 2015-03-23  
updated: 2018-02-22  
canonical: https://www.mindstick.com/blog/10854/angularjs-filters  
category: "angular js"  
tags: ["angularjs filter"]  
reading_time: 3 minutes  

---

# AngularJs Filters

Hi everyone in this blog I’m explaining about [Angularjs](https://www.mindstick.com/articles/13081/advantages-disadvantages-of-angularjs-is-that-ideal-for-your-project) Filters.

##### Introduction:

##

Filters are used to change [modify the data](https://answers.mindstick.com/qa/97470/is-it-possible-to-modify-the-data-once-it-is-written-in-a-block) and can be clubbed in [expression](https://www.mindstick.com/articles/1861/sqlite-expressions) or [directives](https://www.mindstick.com/blog/44/directives-in-asp-dot-net) using pipe character. Following is the list of commonly used filters.

1. Uppercase: converts a text to upper case text.

2. Lowercase: converts a text to lowercase text.

3. Currency: formats text in a [currency format](https://www.mindstick.com/blog/328/currency-format-in-javascript).

4. filter: filter the array to a subset of it based on provided criteria.

5. orderby: orders the array based on provided criteria.

##### Uppercase filter:

##

Add uppercase filter to an expression using pipe character. Here we've added uppercase filter to print [student name](https://www.mindstick.com/forum/157178/how-to-filter-1000-of-student-name-in-php-in-ascending-order) in all [capital letters](https://answers.mindstick.com/qa/92915/do-capital-letters-matter-in-urls).

```
Enter first name:<input type="text" ng-model="student.firstName">Enter last name: <input type="text" ng-model="student.lastName">Name in Upper Case: {{student.fullName() | uppercase}}
```

##### Lowercase filter:

##

Add lowercase filter to an expression using pipe character. Here we've added lowercase filter to print student name in all lowercase letters.

```
Enter first name:<input type="text" ng-model="student.firstName">Enter last name: <input type="text" ng-model="student.lastName">Name in Upper Case: {{student.fullName() | lowercase}}
```

##### Currency filter:

##

Add currency filter to an expression [returning](https://www.mindstick.com/news/2477/returning-ceo-bob-iger-dismisses-the-disney-apple-sale-as-pure-speculation) number using pipe character. Here we've added currency filter to print fees using currency format.

```
Enter fees: <input type="text" ng-model="student.fees">fees: {{student.fees | currency}}
```

##### Filter filter:

##

To display only [required](https://www.mindstick.com/forum/160269/what-is-required-data-annotation-how-does-it-affect-model-validation) subjects, we've used subjectName as filter.

```
Enter subject: <input type="text" ng-model="subjectName">Subject:<ul>  <li ng-repeat="subject in student.subjects | filter: subjectName">    {{ subject.name + ', marks:' + subject.marks }}  </li></ul>
```

##### Orderby filter:

##

To order subjects by marks, we've used orderBy marks.

```
Subject:<ul>  <li ng-repeat="subject in student.subjects | orderBy:'marks'">    {{ subject.name + ', marks:' + subject.marks }}  </li></ul>
```

##### \

##### Example:

##

The following example will showcase all the above-mentioned filters.

```
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <h2>AngularJS Sample Application</h2><div ng-app="mainApp" ng-controller="studentController"><table border="0"><tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr><tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr><tr><td>Enter fees: </td><td><input type="text" ng-model="student.fees"></td></tr><tr><td>Enter subject: </td><td><input type="text" ng-model="subjectName"></td></tr></table><br/><table border="0"><tr><td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td></tr><tr><td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td></tr><tr><td>fees: </td><td>{{student.fees | currency}}</td></tr><tr><td>Subject:</td><td><ul>   <li ng-repeat="subject in student.subjects | filter: subjectName |orderBy:'marks'">      {{ subject.name + ', marks:' + subject.marks }}   </li></ul></td></tr></table></div><script>    var mainApp = angular.module("mainApp", []);     mainApp.controller('studentController', function ($scope) {        $scope.student = {            firstName: "Kamlakar",            lastName: "Singh",            fees: 500,            subjects: [               { name: 'Physics', marks: 70 },               { name: 'Chemistry', marks: 80 },               { name: 'Math', marks: 65 }            ],            fullName: function () {                var studentObject;                studentObject = $scope.student;                return studentObject.firstName + " " + studentObject.lastName;            }        };    });</script>
```

##### Output:

##

![AngularJs Filters](https://www.mindstick.com/blogs/ba133138-20f1-46f0-abfe-491a44620471/images/42c926b1-dec1-4746-a045-7508283840d3.png)

---

Original Source: https://www.mindstick.com/blog/10854/angularjs-filters

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