Home > DeveloperSection > Blogs > AngularJs Filters

AngularJs Filters


Angular JS Angularjs Filter 
Ratings:
0 Comment(s)
 886  View(s)
Rate this:

AngularJs Filters

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

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:


Don't want to miss updates? Please click the below button!

Follow MindStick