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 expression or directives 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.

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 in all capital letters.

Enter first name:<inputtype="text"ng-model="student.firstName">
Enter last name: <inputtype="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:<inputtype="text"ng-model="student.firstName">
Enter last name: <inputtype="text"ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | lowercase}}

Currency filter:

Add currency filter to an expression returning number using pipe character. Here we've added currency filter to print fees using currency format.

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

Filter filter:

To display only required subjects, we've used subjectName as filter.

Enter subject: <inputtype="text"ng-model="subjectName">
Subject:
<ul>
  <ling-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>
  <ling-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.

<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
 
<h2>AngularJS Sample Application</h2>
<divng-app="mainApp"ng-controller="studentController">
<tableborder="0">
<tr><td>Enter first name:</td><td><inputtype="text"ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><inputtype="text"ng-model="student.lastName"></td></tr>
<tr><td>Enter fees: </td><td><inputtype="text"ng-model="student.fees"></td></tr>
<tr><td>Enter subject: </td><td><inputtype="text"ng-model="subjectName"></td></tr>
</table>
<br/>
<tableborder="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>
   <ling-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: