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.
{{ 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 FilterFirst 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 FilterFirst 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 FilterFees: <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 FilterEnter 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>
|
Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog.
For more detail about me, kindly refer to this link..
|
You Might Also Like
