Filters are used to do some changes in the data. It can be used by adding pipe character.
These are the types of filters in angular:
- uppercase: It converts any text to upper case.
- lowercase: It converts any text to lower case.
- currency: It converts into currency format.
- filter: It can filter array based on any given criteria.
- orderby: It can order array based on any given criteria.
uppercase filter:
You can use uppercase filter by adding it to an expression using pipe(|) character. Below is the code that shows employee full name in uppercase.
Enter first name:<input type = "text" ng-model = employee.firstName">
Enter last name: <input type = "text" ng-model = employee.lastName">
Name in Upper Case: {{employee.fullName() | uppercase}}
lowercase filter:
You can use lowercase filter by adding it to an expression using pipe(|) character. Below is the code that shows employee full name in lowercase.
Enter first name:<input type = "text" ng-model = employee.firstName">
Enter last name: <input type = "text" ng-model = employee.lastName">
Name in Upper Case: {{employee.fullName() | lowercase}}
currency filter:
currency filter can be used by adding it to an expression using pipe character. It will return a number.
Enter salary: <input type = "text" ng-model = employee.salary>
salary: {{employee.salary | currency}}
filter filter:
It is used to filter by a particular name. In the below code subject name is used as filter to display only required subjects.
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:
It is used to arrange data in some order. Below is the code that arrange subjects by order of marks.
Subject:
<ul>
<li ng-repeat = "subject in student.subjects | orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
You can check the demo here.
0 Comment(s)