/ / What are filters in AngularJs?
angularjs filter directive

What are filters in AngularJs?

Edit
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 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>
//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

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.