How can we add Filters to AngularJS Expressions ?

AngularJS  Filters are used to change modify the data and can be clubbed in expression or directives using pipe character.
Filters can be added to expressions and directives using a “pipe” character. Following is the list of commonly used filters.

lowercase : Format a string to lower case.
uppercase : Format a string to upper case.
currency : Format a number to a currency format.
filter : filter the array to a subset of it based on provided criteria.
orderBy : Orders an array by an expression.

AngularJS Filters : uppercase

<div ng-app=”myApp” ng-controller=”mySampleCtrl”>

<p>The name is {{ userLastName | uppercase }}</p>

</div>

Following example helps to display only required subjects, Here we using subjectName as filter.

AngularJS Filters : filter

Enter a 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>

Following example helps to order subjects by marks, Here we sorting orderBy marks.

AngularJS Filters : orderBy
Subject:
<ul>
<li ng-repeat = “subject in student.subjects | orderBy:’marks’“>
{{ subject.name + ‘, marks:’ + subject.marks }}
</li>
</ul>