| Newsletter |
How to Create Custom Filters In AngularJS
AngularJs » on Mar 8, 2016 { 1 Comment } By Sivateja
In the previous article, we had a look at built-in Angular filters, these built-in filters will cover many common use cases, but you can also create your own filters in Angular 🙂 by writing logic based on your requirement.
Hmm for example, as per my requirement I need to reverse the string and capitalize the first letter. Lets see how to create custom filter for this requirement.
AngularJS Custom Filter Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="java4sApp" ng-controller="java4sCtrl">
Welcome to {{ name | java4sFilter }}
</div>
<script>
angular.module('java4sApp', [])
.controller('java4sCtrl', function($scope) {
$scope.name = "java4s"
})
.filter('java4sFilter',function(){
return function( str ) {
var revStr = str.split('').reverse();
return revStr[0].toUpperCase() + revStr.join('').slice(1);
}
});
</script>
</body>
</html>Output
Welcome to S4avaj
You Might Also Like
::. About the Author .:: | ||
 | ||
Comments
One Response to “How to Create Custom Filters In AngularJS”
Really superb… awesome…. Plz give some examples based on dependency injections……