Built in filters
Download as DOCX, PDF0 likes704 views
Filters format data for display to users. Built-in filters include filter to search/filter data and orderBy to sort. Custom filters can be created to format data as needed, like converting large numbers to abbreviations. Filters are invoked with a pipe (|) in bindings like {{expression | filter}}. Examples demonstrate using built-in and custom filters.
![Build in Filters
A filter formats the value of an expression for display to the user. They can be used in view templates, controllers or
services and it is easy to define your own filter.
In Other word you can say, a filter provides a way to format the data we display to the user. Angular gives us
Several built-in filters as well as an easy way to create our own.
We invoke filters in our HTML with the | (pipe) character inside the template binding characters {{
}}.
Example 1
external.js
//defining module
var app = angular.module('IG', [])
app.controller('FirstController', ['$scope', function ($scope) {
$scope.customers = [
{
name: 'David',
street: '1234 Anywhere St.'
},
{
name: 'Tina',
street: '1800 Crest St.'
},
{
name: 'Brajesh',
street: 'Noida'
},
{
name: 'Michelle',
street: '890 Main St.'
}
];
} ])
Index.html
<!DOCTYPE html>
<html ng-app="IG">
<head lang="en">
<meta charset="UTF-8">
<title>Filter in AngularJS</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js">
</script>
<script src="Scripts/external.js"></script>
</head>
<body>
<div ng-controller="FirstController">
<input type="text" ng-model="SearchData" />
<ul>](https://image.slidesharecdn.com/6built-infilters-141207094345-conversion-gate01/85/Built-in-filters-1-320.jpg)
![<li ng-repeat="Cust in customers | filter:SearchData | orderBy: ‘Name’">
{{Cust.name}} - {{Cust.street}}
</li>
</ul>
</div>
</body>
</html>
Example 2
external.js
//defining module
var app = angular.module('IG', [])
app.controller('SecondController', ['$scope', function ($scope) {
$scope.friends =
[{name:'John', phone:'555-1212', age:10},
{name:'Mary', phone:'555-9876', age:19},
{name:'Mike', phone:'555-4321', age:21},
{name:'Adam', phone:'555-5678', age:35},
{name:'Julie', phone:'555-8765', age:29}];
$scope.predicate = '-age';
} ])
index.html
<!DOCTYPE html>
<html ng-app="IG">
<head lang="en">
<meta charset="UTF-8">
<title>Filter in AngularJS</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js">
</script>
<script src="Scripts/external.js"></script>
</head>
<body>
<div ng-controller="SecondController">
<pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
<hr/>
[ <a href="" ng-click="predicate=''">unsorted</a> ]
<table class="friend">
<tr>
<th><a href="" ng-click="predicate = 'name'; reverse=false">Name</a>
(<a href="" ng-click="predicate = '-name'; reverse=false">^</a>)</th>
<th><a href="" ng-click="predicate = 'phone'; reverse=!reverse">Phone
Number</a></th>
<th><a href="" ng-click="predicate = 'age'; reverse=!reverse">Age</a></th>
</tr>
<tr ng-repeat="friend in friends | orderBy:predicate:reverse">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>](https://image.slidesharecdn.com/6built-infilters-141207094345-conversion-gate01/85/Built-in-filters-2-320.jpg)
![</tr>
</table>
</div>
</body>
</html>
Example 3
external.js
//defining module
var app = angular.module('IG', [])
app.controller('FirstController', ['$scope', function ($scope) {
$scope.customers = [
{
name: 'David',
street: '1234 Anywhere St.'
},
{
name: 'Tina',
street: '1800 Crest St.'
},
{
name: 'Brajesh',
street: 'Noida'
},
{
name: 'Michelle',
street: '890 Main St.'
}
];
} ])
Index.html
<!DOCTYPE html>
<html ng-app="IG">
<head lang="en">
<meta charset="UTF-8">
<title>Filter in AngularJS</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js">
</script>
<script src="Scripts/external.js"></script>
</head>
<body>
<div ng-controller="FirstController">
<input type="text" ng-model="SearchData" />
<ul>
<li ng-repeat="Cust in customers | filter:SearchData | orderBy: ‘Name’ |
LimitTo:5">
{{Cust.name}} - {{Cust.street}}
</li>
</ul>
</div>](https://image.slidesharecdn.com/6built-infilters-141207094345-conversion-gate01/85/Built-in-filters-3-320.jpg)
![</body>
</html>
Example 4
How to pass multiple parameter at same time in filter
<strong>{{PeerWorstValue | sliderchangevalue:UnitId:Decimal_Place}}</strong>
app.filter('sliderchangevalue', function () {
return function (value, uid, DP) {
var uuid = uid;
if (uuid == 2) {
var strValue = "" + value;
var arr = strValue.replace("-", "").split(".")[0].split("");
//console.log(arr);
if (arr.length >= 12) {
value = strValue / 1000000000000;
return value.toFixed(DP) + "T";
}
else if (arr.length >= 9) {
value = strValue / 1000000000;
return value.toFixed(DP) + "B";
}
else if (arr.length >= 6) {
value = strValue / 1000000;
return value.toFixed(DP) + "M";
}
else if (arr.length >= 3) {
value = strValue / 1000;
return value.toFixed(DP) + "K";
}
else {
return value.toFixed(DP);
}
}
else
return value.toFixed(DP);
};
});](https://image.slidesharecdn.com/6built-infilters-141207094345-conversion-gate01/85/Built-in-filters-4-320.jpg)
Built in filters
- 1. Build in Filters A filter formats the value of an expression for display to the user. They can be used in view templates, controllers or services and it is easy to define your own filter. In Other word you can say, a filter provides a way to format the data we display to the user. Angular gives us Several built-in filters as well as an easy way to create our own. We invoke filters in our HTML with the | (pipe) character inside the template binding characters {{ }}. Example 1 external.js //defining module var app = angular.module('IG', []) app.controller('FirstController', ['$scope', function ($scope) { $scope.customers = [ { name: 'David', street: '1234 Anywhere St.' }, { name: 'Tina', street: '1800 Crest St.' }, { name: 'Brajesh', street: 'Noida' }, { name: 'Michelle', street: '890 Main St.' } ]; } ]) Index.html <!DOCTYPE html> <html ng-app="IG"> <head lang="en"> <meta charset="UTF-8"> <title>Filter in AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"> </script> <script src="Scripts/external.js"></script> </head> <body> <div ng-controller="FirstController"> <input type="text" ng-model="SearchData" /> <ul>
- 2. <li ng-repeat="Cust in customers | filter:SearchData | orderBy: ‘Name’"> {{Cust.name}} - {{Cust.street}} </li> </ul> </div> </body> </html> Example 2 external.js //defining module var app = angular.module('IG', []) app.controller('SecondController', ['$scope', function ($scope) { $scope.friends = [{name:'John', phone:'555-1212', age:10}, {name:'Mary', phone:'555-9876', age:19}, {name:'Mike', phone:'555-4321', age:21}, {name:'Adam', phone:'555-5678', age:35}, {name:'Julie', phone:'555-8765', age:29}]; $scope.predicate = '-age'; } ]) index.html <!DOCTYPE html> <html ng-app="IG"> <head lang="en"> <meta charset="UTF-8"> <title>Filter in AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"> </script> <script src="Scripts/external.js"></script> </head> <body> <div ng-controller="SecondController"> <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre> <hr/> [ <a href="" ng-click="predicate=''">unsorted</a> ] <table class="friend"> <tr> <th><a href="" ng-click="predicate = 'name'; reverse=false">Name</a> (<a href="" ng-click="predicate = '-name'; reverse=false">^</a>)</th> <th><a href="" ng-click="predicate = 'phone'; reverse=!reverse">Phone Number</a></th> <th><a href="" ng-click="predicate = 'age'; reverse=!reverse">Age</a></th> </tr> <tr ng-repeat="friend in friends | orderBy:predicate:reverse"> <td>{{friend.name}}</td> <td>{{friend.phone}}</td> <td>{{friend.age}}</td>
- 3. </tr> </table> </div> </body> </html> Example 3 external.js //defining module var app = angular.module('IG', []) app.controller('FirstController', ['$scope', function ($scope) { $scope.customers = [ { name: 'David', street: '1234 Anywhere St.' }, { name: 'Tina', street: '1800 Crest St.' }, { name: 'Brajesh', street: 'Noida' }, { name: 'Michelle', street: '890 Main St.' } ]; } ]) Index.html <!DOCTYPE html> <html ng-app="IG"> <head lang="en"> <meta charset="UTF-8"> <title>Filter in AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"> </script> <script src="Scripts/external.js"></script> </head> <body> <div ng-controller="FirstController"> <input type="text" ng-model="SearchData" /> <ul> <li ng-repeat="Cust in customers | filter:SearchData | orderBy: ‘Name’ | LimitTo:5"> {{Cust.name}} - {{Cust.street}} </li> </ul> </div>
- 4. </body> </html> Example 4 How to pass multiple parameter at same time in filter <strong>{{PeerWorstValue | sliderchangevalue:UnitId:Decimal_Place}}</strong> app.filter('sliderchangevalue', function () { return function (value, uid, DP) { var uuid = uid; if (uuid == 2) { var strValue = "" + value; var arr = strValue.replace("-", "").split(".")[0].split(""); //console.log(arr); if (arr.length >= 12) { value = strValue / 1000000000000; return value.toFixed(DP) + "T"; } else if (arr.length >= 9) { value = strValue / 1000000000; return value.toFixed(DP) + "B"; } else if (arr.length >= 6) { value = strValue / 1000000; return value.toFixed(DP) + "M"; } else if (arr.length >= 3) { value = strValue / 1000; return value.toFixed(DP) + "K"; } else { return value.toFixed(DP); } } else return value.toFixed(DP); }; });