angularjs filter directive

What are filters in AngularJs?

The AngularJs Filters are used to display or modify the live data as per your filter text. We can write the filter expression using the pipe (|) character. i.e.

{{ yourData| filterTypes }}

There are different types of filter which as given below.

1. Uppercase Filter                                    click for live demo on punker
2. Lowercase Filter
3. Currency Filter
4. OrderBy Filter
5. Filter


Uppercase Filter : This is used to convert a input text to uppercase.
1
2
3
4
5
///The Uppercase angular Filter
First name:<input type="text" ng-model="employee.firstName">
Last name: <input type="text" ng-model="employee.lastName">
Display Upper Case: {{employee.fullName() | uppercase}}
///The Uppercase angular Filter

First name:<input type="text" ng-model="employee.firstName">
Last name: <input type="text" ng-model="employee.lastName">
Display Upper Case: {{employee.fullName() | uppercase}}

Lowercase Filter : This is used to convert a input text to lowercase.
1
2
3
4
5
///The Lowercase angular Filter
First name:<input type="text" ng-model="employee.firstName">
Last name: <input type="text" ng-model="employee.lastName">
Display Lower Case: {{employee.fullName() | lowercase}}
///The Lowercase angular Filter

First name:<input type="text" ng-model="employee.firstName">
Last name: <input type="text" ng-model="employee.lastName">
Display Lower Case: {{employee.fullName() | lowercase}}

Currency Filter : This is used to convert a formats text in a currency format.
1
2
3
4
///The Angular Currency Filter
Fees: <input type="text" ng-model="employee.fees">
Fees: {{employee.fees | currency}}
///The Angular Currency Filter

Fees: <input type="text" ng-model="employee.fees">
Fees: {{employee.fees | currency}}

OrderBy Filter : This is used to Order to the array by your criterias. The default OrderBy is asc.
1
2
3
4
5
6
7
///The Angular Currency Filter
<div>
  <divng-repeat="emp in employee.subjects | orderBy:'marks'">
    {{ emp.name + ', marks:' + emp.marks }}
  </div>
</div>
///The Angular Currency Filter

<div>
  <divng-repeat="emp in employee.subjects | orderBy:'marks'">
    {{ emp.name + ', marks:' + emp.marks }}
  </div>
</div>

filter : This is used to filter the array to a subset of your provided criterias.
1
2
3
4
5
6
7
8
9
///The Angular Filter
Enter Filter key:
<input type="text" ng-model="subjectName">
<div>
  <div ng-repeat="emp in empoyee.subjects | filter: subjectName">
    {{ emp.name + ', marks:' + emp.marks }}
  </div>
</div>
///The Angular Filter

Enter Filter key: 
<input type="text" ng-model="subjectName">
<div>
  <div ng-repeat="emp in empoyee.subjects | filter: subjectName">
    {{ emp.name + ', marks:' + emp.marks }}
  </div>
</div>

The live example code as given below.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
//All-in-one code sample
<html>
<head>
  <title>AngularJS Filters</title>
  <script>
    var app = angular.module('myApp', []);
    app.controller('studentController', function($scope) {
      $scope.employee = {
        firstName: "Anil",
        lastName: "Singh",
        fees: 500000,
         
        subjects: [{
          name: 'Computer Science',
          marks: 92
        }, {
          name: 'Science',
          marks: 85
        }, {
          name: 'Maths',
          marks: 95
        }],
         
        fullName: function() {
          var studentObject = $scope.employee;
          return studentObject.firstName + " " + studentObject.lastName;
        }
      };
    });
  </script>
</head>
<body ng-app="myApp" ng-controller="studentController">
  <h2>AngularJS filter example</h2>
  <div>
    <table border="0">
      <tr>
        <td>
          First Name:
          <input type="text" ng-model="employee.firstName">
        </td>
      </tr>
      <tr>
        <td>
          Last Name:
          <input type="text" ng-model="employee.lastName">
        </td>
      </tr>
      <tr>
        <td>
          Fees:
          <input type="text" ng-model="employee.fees">
        </td>
      </tr>
      <tr>
        <td>
          Filter Key:
          <input type="text" ng-model="subjectName">
        </td>
      </tr>
    </table>
    <br/>
    <table border="1">
      <tr>
        <td>Display Upper Case:</td>
        <td>{{employee.fullName() | uppercase}}</td>
      </tr>
      <tr>
        <td>Display Lower Case:</td>
        <td>{{employee.fullName() | lowercase}}</td>
      </tr>
      <tr>
        <td>Fees:</td>
        <td>{{employee.fees | currency}}</td>
      </tr>
      <tr>
        <td>Subject:</td>
        <td>
          <ul>
            <li ng-repeat="emp in employee.subjects | filter: subjectName | orderBy:'marks'">
              {{ emp.name + ', Marks:' + emp.marks }}
            </li>
          </ul>
        </td>
      </tr>
    </table>
  </div>
</body>
</html>
//All-in-one code sample
<html>
<head>
  <title>AngularJS Filters</title>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
  <script>
    var app = angular.module('myApp', []);
    app.controller('studentController', function($scope) {

      $scope.employee = {
        firstName: "Anil",
        lastName: "Singh",
        fees: 500000,
        
        subjects: [{
          name: 'Computer Science',
          marks: 92
        }, {
          name: 'Science',
          marks: 85
        }, {
          name: 'Maths',
          marks: 95
        }],
        
        fullName: function() {
          var studentObject = $scope.employee;
          return studentObject.firstName + " " + studentObject.lastName;
        }
      };
    });
  </script>
</head>

<body ng-app="myApp" ng-controller="studentController">
  <h2>AngularJS filter example</h2>
  <div>
    <table border="0">
      <tr>
        <td>
          First Name:
          <input type="text" ng-model="employee.firstName">
        </td>
      </tr>
      <tr>
        <td>
          Last Name:
          <input type="text" ng-model="employee.lastName">
        </td>
      </tr>
      <tr>
        <td>
          Fees:
          <input type="text" ng-model="employee.fees">
        </td>
      </tr>
      <tr>
        <td>
          Filter Key:
          <input type="text" ng-model="subjectName">
        </td>
      </tr>
    </table>
    <br/>
    <table border="1">
      <tr>
        <td>Display Upper Case:</td>
        <td>{{employee.fullName() | uppercase}}</td>
      </tr>
      <tr>
        <td>Display Lower Case:</td>
        <td>{{employee.fullName() | lowercase}}</td>
      </tr>
      <tr>
        <td>Fees:</td>
        <td>{{employee.fees | currency}}</td>
      </tr>
      <tr>
        <td>Subject:</td>
        <td>
          <ul>
            <li ng-repeat="emp in employee.subjects | filter: subjectName | orderBy:'marks'">
              {{ emp.name + ', Marks:' + emp.marks }}
            </li>
          </ul>
        </td>
      </tr>
    </table>
  </div>
</body>

</html>

ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.