AngularJs provides a number of filters.Filters Are added to format data or to transform it. It is added to the expressions by using the pipe character '|' followed by a filter.
Some of the AngularJs filters are:
- uppercase
- lowercase
- orderBy
- currency
- filter
Uppercase:
This filter formats the string to uppercase or in simple words we can say that it converts the string to the uppercase.
<div ng-app="myTestApp" ng-controller="testCtrl">
<p>The name is {{ firstName | uppercase }}</p>
</div>
If you enter the firstName as rahul it will return an output as RAHUL.
Lowercase:
This filter converts a set of string to lowercase.
<div ng-app="myTestApp" ng-controller="testCtrl">
<p>The name is {{ firstName | lowercase }}</p>
</div>
If you enter the firstName as RAHUL it will return an output as rahul.
orderBy:
This filter is used for sorting an array.
<div ng-app="myTestApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'lastName'">
{{ x.lastName + ', ' + x.country }}
</li>
</ul>
</div>
It will rearrange your array according to the lastName.
Currency:
This filter helps us to format a number to a currency format.
<div ng-app="myTestApp" ng-controller="rateCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
Filter:
This filter is used to select a subset of an array.It can only be used on arrays and it returns an array containing only the matching items.
<div ng-app="myTestApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | filter : 'i'">
{{ x }}
</li>
</ul>
</div>
This will display only those names that contain the letter 'i' in it.
0 Comment(s)