over 8 years ago
In AngularJS, Filters are used to format data which is served to the user. Filters are added to expressions by using the pipe(|) character and followed by a filter method. There are a lot of in-built filters available in AngularJS
For example:
currency: This filter is used to convert a number to a currency format.
uppercase: This filter is used to convert a string to upper case.
We can also create a custom filer according to our requirement in app.
In the following example, we created a 'customStringFormat' custom filter which is convert the country name to lower in case using javaScript function.
Here,
The AngularJS app is defined using ng-app directive i.e. ng-app="angularApp" and this app runs inside the <ul>.
Defined countryCtrl named controller using directive ng-controller i.e. ng-controller="countryCtrl" which is a JavaScript function and AngularJS called the countryCtrl controller with a $scope object .
Registered a custom filter named 'customStringFormat' using factory filter method and passed country element to perform custom operation.
<!DOCTYPE html><html><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><body><ul ng-app="angularApp" ng-controller="countryCtrl"><li ng-repeat="n in countryArr">{{n | customStringFormat}}</li></ul><script>var app = angular.module('angularApp', []);app.filter('customStringFormat', function() {return function(t) {return toLowerCase();};});app.controller('countryCtrl', function($scope) {$scope.countryArr = ['INDIA', 'ENGLAND', 'AUSTRAILIA', 'CHINA', 'NORWAY'];});</script><p>Create custom filter in angularjs</p></body></html>
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<ul ng-app="angularApp" ng-controller="countryCtrl">
<li ng-repeat="n in countryArr">
{{n | customStringFormat}}
</li>
</ul>
<script>
var app = angular.module('angularApp', []);
app.filter('customStringFormat', function() {
return function(t) {
return toLowerCase();
};
});
app.controller('countryCtrl', function($scope) {
$scope.countryArr = ['INDIA', 'ENGLAND', 'AUSTRAILIA', 'CHINA', 'NORWAY'];
});
</script>
<p>Create custom filter in angularjs</p>
</body>
</html>
The output will be:
Creating a custom filter in angularJS
Can you help out the community by solving one of the following Javascript problems?
Do activity (Answer, Blog) > Earn Rep Points > Improve Rank > Get more opportunities to work and get paid!
For more topics, questions and answers, please visit the Tech Q&A page.
0 Comment(s)