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:<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 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 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

  Modified On Feb-22-2018 12:50:47 AM

Leave Comment