- AngularJS provides $filter() method to creates custom filter.
- Filter can be used to the AngularJS expression.It is used as {{expression | filterName}}.
- In this demo,"We will create custom filter which will detect any vowel character if present inside a word".
- Below code shows a custom filter declaration and use inside a AngularJS expression.If a vowel is detected then it returns the original word and if no vowel is present the it returns a message string "No vowels in [word]".
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="WordController">
<h1>Without Filter</h1>
<ol>
<li ng-repeat="word in words">{{word}}</li>
</ol>
<h1>With Filter</h1>
<ol>
<li ng-repeat="word in words">{{word|vowelFilter}}</li>
</ol>
<script>
var myApp = angular.module("myApp", ["myFilters"]);
myApp.controller('WordController', function($scope) {
$scope.words = ["BBBB", "DEDE", "CFCF", "KAKA", "LDLD", "MEME", "OFOF"];
});
var myFilter = angular.module('myFilters', []);
myFilter.filter('vowelFilter', function() {
return function(input) {
var vowelArray = ['a', 'e', 'i', 'o', 'u'];
for (var i = 0; i < vowelArray.length; i++) {
if (input.toLowerCase().indexOf(vowelArray[i]) > 0) {
return input;
}
}
return "No Vowels in " + input;
};
});
</script>
</body>
</html>
- The demo output is embedded in below JSBIN link.
