Custom Filters in AngularJS
Filters are used in AngularJS to modify or change the format of the data as per requirement.Filters are used within the expression {{}} to format data inside the expression.There are certain inbuilt filters provided by AngularJS.Along with inbuilt filters, AngularJS provides us freedom to write our own custom filters.
We can create a custom filter by registering filter on the module.
- uppercase
- lowercase
- json
- currency
- date
- orderBy
In this post, we are going to see how to use the inbuilt filters and write custom filters both.
We are using currency filter to format price column as currency and you can see $ symbol with the amount.
We are creating two custom filters in this example
firstCap - In this filter we are making the first letter of the word to capital and other letters small in Name column of the table and in check filter.
checkcod - In this filter we are checking if the product is eligible for COD if yes then we are appending * symbol to it.
<html ng-app="filterApp">
<head>
<title>Filter</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="prdctrl">
<div class="panel panel-default">
<div class="panel-heading">
<h3>
Products Available
<span class="label label-primary">{{products.length}}</span>
</h3>
<div class="panel-body">Sort By: <select ng-model="param" ng-options="item for item in sortparam"></select>
<div class="panel-body">
<table class="table table-stripped table-bordered table-condenced">
<thead>
<tr>
<td>Product</td>
<td>Id</td>
<td>Name</td>
<td class="text-right">Price</td>
<td>Tags</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in products|orderBy:param">
<td>{{ p.name|checkcod:p.properties.price}}</td>
<td>{{ p.properties.id }}</td>
<td>{{ p.properties.name|firstCap}}</td>
<td class="text-right">{{ p.properties.price | currency }}</td>
<td ng-repeat="s in p.properties.tags">{{s.tag1+","+s.tag2 }}</td>
</tbody>
</table>
<script type="text/javascript">
angular.module("filterApp",[])
.controller("prdctrl",function($scope){
$scope.products = [{
"name":"Camera",
"properties":{
"id":1,
"name":"NIKON",
"price":1000,
"tags":[{
"tag1":"dslr",
"tag2":"digtal"}]
}
},
{
"name":"Mobile",
"properties":{
"id":2,
"name":"NOKIA",
"price":5000,
"tags":[{
"tag1":"4g",
"tag2":"wifi"}]
}
}, {
"name":"Appliances",
"properties":{
"id":3,
"name":"SAMSUNG",
"price":6000,
"tags":[{
"tag1":"kitchen",
"tag2":"oven"}]
}
}];
$scope.sortparam = ["name","price"];
})
.filter("checkcod", function(){
return function(value1,value2){
if (value2>5000){
return value1+"*";
} else {
return value1;
}
};
})
.filter("firstCap", function(){
return function(value){
return (!!value)?value.charAt(0).toUpperCase()+value.substr(1).toLowerCase():'';
};
});
</script>
<h4>* Not Available for COD</h4>
</body>
</html>
Hope you like the tutorial and basics of filter is clear to you.
Give you suggestion in comments.If you like the post Share with your friends on social network.
Give you suggestion in comments.If you like the post Share with your friends on social network.
Custom Filters in AngularJS
Reviewed by JavaInstance
on
2:17:00 AM
Rating:
Reviewed by JavaInstance
on
2:17:00 AM
Rating:
No comments: