Filters in AngularJS
Download as DOCX, PDF1 like999 views
Filters in AngularJS allow formatting of data for display to users. There are built-in filters like currency and date that format numbers and dates, and filters can be used in templates, controllers, or services. Custom filters can also be created and defined as Angular modules to transform input data in a specified way.
![Filters
In AngularJS, 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.
Filter can be used in view templates, controllers or services and it is easy to define your own custom filter.
We invoke filters in our HTML with the | (pipe) character inside the template binding characters {{
}}.
Example:-
{{ Value goes here | Filter name goes here }}
Build in filter in angularjs
Name Description
filter Selects a subset of items from array and returns it as a new array.
currency
Formats a number as a currency (ie $1,234.56). When no currency symbol is provided, default symbol for
current locale is used.
number Formats a number as text.
date Formats date to a string based on the requested format.
json Allows you to convert a JavaScript object into JSON string.
lowercase Converts string to lowercase.
uppercase Converts string to uppercase.
limitTo
Creates a new array or string containing only a specified number of elements. The elements are taken
from either the beginning or the end of the source array, string or number, as specified by the value and
sign (positive or negative) of limit. If a number is used as input, it is converted to a string.
orderBy
Orders a specified array by the expression predicate. It is ordered alphabetically for strings and
numerically for numbers. Note: if you notice numbers are not being sorted corre ctly, make sure they are
actually being saved as numbers and not strings.
external.js
//defining module
var app = angular.module('IG', [])
app.controller('FirstController', ['$scope', function ($scope) {
$scope.customers = [
{
name: 'David',
street: '1234 Anywhere St.'
},
{](https://image.slidesharecdn.com/5filters-141111060126-conversion-gate01/85/Filters-in-AngularJS-1-320.jpg)
![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:2">
{{Cust.name}} - {{Cust.street}}
</li>
</ul>
<p>Filter uppercase ::- {{ "I am Done" | uppercase }}</p>
<p>Filter lowercase ::- {{ "Are you Done with your Work" | lowercase }}</p>
<p>Filter currency ::- {{'8794'|currency}}</p>
<p>Filter format Number ::- {{'871234'|number}}</p>
</div>
</body>
</html>
For instance, let’s say we want to capitalize our string. We can either change all the characters
In a string to be capitalized, or we can use a filter.
We can also use filters from within JavaScript by using the $filter service.
For instance, to use the lowercase JavaScript filter:
app.controller('DemoController', ['$scope', '$filter',
function ($scope, $filter) {
$scope.name = $filter('lowercase')('Ari');
}]);](https://image.slidesharecdn.com/5filters-141111060126-conversion-gate01/85/Filters-in-AngularJS-2-320.jpg)
![Making Our Own Filter
As we saw above, it’s really easy to create our own custom filter. To create a filter, we put it under
Its own module. Let’s create one together: a filter that capitalizes the first character of a string.
First, we need to create it in a module that we’ll require in our app (this step is good practice):
//defining module
var app = angular.module('IG', [])
//define filter
app.filter('capitalize', function () {
return function (input) { }
});
//define filter using service as a dependent
app.filter('ReverseData', function (data) {
return function (Message) {
return Message.split("").reverse().join("") + data.Message;
};
})
Filters are just functions to which we pass input. In the function above, we simply take the input as
the string on which we are calling the filter. We can do some error checking inside the function:
//defining module
var app = angular.module('IG', [])
//define filter
app.filter('capitalize', function () {
return function (input) {
// input will be the string we pass in
if (input)
return input[0].toUpperCase() + input.slice(1);
}
});
Now, if we want to capitalize the first letter of a sentence, we can first lowercase the entire string and then capitalize
the first letter with our filter:
<!-- Ginger loves dog treats -->
{{ 'ginger loves dog treats' | lowercase | capitalize }}
Custom Filter Example
Index.html
<!DOCTYPE html>
<html ng-app="IG">
<head lang="en">
<meta charset="UTF-8">
<title>Custom Filter in AngularJS</title>](https://image.slidesharecdn.com/5filters-141111060126-conversion-gate01/85/Filters-in-AngularJS-3-320.jpg)
![<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">
<p>{{name}}</p>
<p>{{"i am brajesh" | LabelMessage}}</p>
<p>{{"i am brajesh" | ReverseData}}</p>
<p>
{{Amount | changevalue:25:3}}
</p>
</div>
</body>
</html>
external.js
//defining module
var app = angular.module('IG', [])
app.controller('FirstController', ['$scope','$filter', function ($scope,$filter) {
$scope.name = $filter('uppercase')('I am done with Controller filter');
$scope.Amount = 8000.78;
}
]);
//Filter used for welcome Message
app.filter('LabelMessage', function () {
return function (input) {
if (input)
return "Welcome "+ input[0].toUpperCase() + input.slice(1);
}
});
//Filter is used to reverse string data
app.filter('ReverseData', function () {
return function (Message) {
return Message.split("").reverse().join("");
};
})
//Pass multiple value into Custom Filter
app.filter('changevalue', function () {
return function (value, discount, DP) {
var Amount = value;
value = Amount * discount / 100;
return value.toFixed(DP);
};
});](https://image.slidesharecdn.com/5filters-141111060126-conversion-gate01/85/Filters-in-AngularJS-4-320.jpg)
Filters in AngularJS
- 1. Filters In AngularJS, 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. Filter can be used in view templates, controllers or services and it is easy to define your own custom filter. We invoke filters in our HTML with the | (pipe) character inside the template binding characters {{ }}. Example:- {{ Value goes here | Filter name goes here }} Build in filter in angularjs Name Description filter Selects a subset of items from array and returns it as a new array. currency Formats a number as a currency (ie $1,234.56). When no currency symbol is provided, default symbol for current locale is used. number Formats a number as text. date Formats date to a string based on the requested format. json Allows you to convert a JavaScript object into JSON string. lowercase Converts string to lowercase. uppercase Converts string to uppercase. limitTo Creates a new array or string containing only a specified number of elements. The elements are taken from either the beginning or the end of the source array, string or number, as specified by the value and sign (positive or negative) of limit. If a number is used as input, it is converted to a string. orderBy Orders a specified array by the expression predicate. It is ordered alphabetically for strings and numerically for numbers. Note: if you notice numbers are not being sorted corre ctly, make sure they are actually being saved as numbers and not strings. external.js //defining module var app = angular.module('IG', []) app.controller('FirstController', ['$scope', function ($scope) { $scope.customers = [ { name: 'David', street: '1234 Anywhere St.' }, {
- 2. 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:2"> {{Cust.name}} - {{Cust.street}} </li> </ul> <p>Filter uppercase ::- {{ "I am Done" | uppercase }}</p> <p>Filter lowercase ::- {{ "Are you Done with your Work" | lowercase }}</p> <p>Filter currency ::- {{'8794'|currency}}</p> <p>Filter format Number ::- {{'871234'|number}}</p> </div> </body> </html> For instance, let’s say we want to capitalize our string. We can either change all the characters In a string to be capitalized, or we can use a filter. We can also use filters from within JavaScript by using the $filter service. For instance, to use the lowercase JavaScript filter: app.controller('DemoController', ['$scope', '$filter', function ($scope, $filter) { $scope.name = $filter('lowercase')('Ari'); }]);
- 3. Making Our Own Filter As we saw above, it’s really easy to create our own custom filter. To create a filter, we put it under Its own module. Let’s create one together: a filter that capitalizes the first character of a string. First, we need to create it in a module that we’ll require in our app (this step is good practice): //defining module var app = angular.module('IG', []) //define filter app.filter('capitalize', function () { return function (input) { } }); //define filter using service as a dependent app.filter('ReverseData', function (data) { return function (Message) { return Message.split("").reverse().join("") + data.Message; }; }) Filters are just functions to which we pass input. In the function above, we simply take the input as the string on which we are calling the filter. We can do some error checking inside the function: //defining module var app = angular.module('IG', []) //define filter app.filter('capitalize', function () { return function (input) { // input will be the string we pass in if (input) return input[0].toUpperCase() + input.slice(1); } }); Now, if we want to capitalize the first letter of a sentence, we can first lowercase the entire string and then capitalize the first letter with our filter: <!-- Ginger loves dog treats --> {{ 'ginger loves dog treats' | lowercase | capitalize }} Custom Filter Example Index.html <!DOCTYPE html> <html ng-app="IG"> <head lang="en"> <meta charset="UTF-8"> <title>Custom Filter in AngularJS</title>
- 4. <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"> <p>{{name}}</p> <p>{{"i am brajesh" | LabelMessage}}</p> <p>{{"i am brajesh" | ReverseData}}</p> <p> {{Amount | changevalue:25:3}} </p> </div> </body> </html> external.js //defining module var app = angular.module('IG', []) app.controller('FirstController', ['$scope','$filter', function ($scope,$filter) { $scope.name = $filter('uppercase')('I am done with Controller filter'); $scope.Amount = 8000.78; } ]); //Filter used for welcome Message app.filter('LabelMessage', function () { return function (input) { if (input) return "Welcome "+ input[0].toUpperCase() + input.slice(1); } }); //Filter is used to reverse string data app.filter('ReverseData', function () { return function (Message) { return Message.split("").reverse().join(""); }; }) //Pass multiple value into Custom Filter app.filter('changevalue', function () { return function (value, discount, DP) { var Amount = value; value = Amount * discount / 100; return value.toFixed(DP); }; });