Filters in angular JS are used to format or transform our data in our required way (Ex: Formatting the given data into date if possible). By using the filters in angular JS we can also use the search operation from a list of data easily.
Filters in angular JS can be used within the expression({{ }}) or within the directives .
Filters in angular JS can be used within the expression({{ }}) or within the directives .
Let’s look over some of default or inbuilt filters provided by the angular JS :
1) uppercase : uppercase filter in angular JS is used to format or convert our data into upper case(angular to ANGULAR).
Syntax Look : {{ modelvariable | uppercase }}
Example :
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('ctrlr',
['$scope', function ($scope) {
$scope.dept = "Developer";
}]);
</script>
In the above script I had just defined a $scope variable “dept”. Now let us make that value to display in upper case by using the uppercase filter as like in below expression :
<body
ng-app="myapp" ng-controller="ctrlr" >
Department is {{ dept | uppercase
}}
</body>
In the above expression {{ dept | uppercase }}, I had used the filter “upercase” after to the pipe symbol separator, which results the usage of filter within expression.
Result of above code :
2) lowercase: lowercase filter in angular JS is
used to format or convert our data into lower case (ANGular to angular).
Syntax Look :
{{
modelvariable| lowercase }}
Example :
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('ctrlr',
['$scope', function ($scope) {
$scope.dept = "DEVeloper";
}]);
</script>
Format In the above script I had just defined a
$scope variable “dept”. Now let us make that value to display in upper case by
using the uppercase filter as like in below expression :
<body
ng-app="myapp" ng-controller="ctrlr" >
Department is {{ dept | lowercase }}
</body>
Expression In the above expression {{ dept |
uppercase }}, I had used the filter “upercase”
after to the pipe symbol separator, which results the usage of filter within
expression.
Result of above code :
3) orderBy filter : orderBy filter in angular JS
is used to display the list of data in an ordered format.
Syntax Look :
ng-repeat="x in collection | orderBy :
'propertytoorder' "
Example on orderBy filter:
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('ctrlr',
['$scope', function ($scope) {
$scope.dept = [
{ name: 'Sales', loc: 'US'},
{name:'Developer',loc:'India'},
{ name: 'Tester', loc: 'England'},
{ name: 'Architect', loc: 'Brazil'}
];
}]);
</script>
In the above script I had declared a list of dept
object with name and location as properties.Now, let us assume that our requirement is like
displaying them based on order of location.
View Look :
<body
ng-app="myapp" ng-controller="ctrlr" >
Department detials :
<ul>
<li ng-repeat="x in dept | orderBy :
'loc' ">{{
x.name + ' in ' + x.loc}}</li>
</ul>
</body>
As the data of dept is in list format I had used
ng-repeat directive by having the filter. Now my expression becomes as like ng-repeat="x in dept |
orderBy : 'loc' ". Here 'loc' is the property off my object. It means we are mentioning that our data should come with an
order based on the ‘loc’ property.
Result :
4) filter : In our applications most of the times we may face a kind of filtering requirement from the large list of data which can be bounded in any html tag like li or table. Angular JS filter provides us an easiest way to solve this requirement by using filter.
Look of syntax :
ng-repeat="x in collection | filter : filtervariable "
ng-repeat="x in collection | filter : filtervariable "
Example :
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('ctrlr',
['$scope', function ($scope) {
$scope.dept = [
{ name: 'Sales', loc: 'US' },
{name:'Developer',loc:'India'},
{ name: 'Tester', loc: 'England'},
{ name: 'Architect', loc: 'Brazil'}
];
}]);
</script>
In the above script, I had declared a list of
dept object with name and location as properties.
Mark Up code :
<body
ng-app="myapp" ng-controller="ctrlr" >
Search
Department : <input type="text" ng-model="searchtxt"></p>
Department detials :
<ul>
<li ng-repeat="x in dept | filter : searchtxt
">{{ x.name + ' in ' + x.loc}}</li>
</ul>
</body>
In the above mark up code, I had taken a input type text where user can enter his search text and based on that search text the content in the list displays.
In the filter expression I used “searchtxt” which is ng-model value of textbox, this thing itself makes to filter the items based on the ng-model value.
Please look over video for the above result :
Multiple filter expression :
It’s also possible to have more than one filter to an expression. This means we can have one or more filters at a time.
Ex: ng-repeat="x in dept | orderBy :
'loc' |filter : test "
If you look over above example we are having both orderBy and filter type filters in single directive.
Thank you for sharing your knowledge. Good content published. Better next go with Angular2/4 same kind of content & Chapters.
ReplyDeleteThank you very much @jb jb. From next month(November start) I usually try to post Angular 2/4 content.
Delete