Filter is one of the important part in angularJS. There are many default filters like:
1. uppercase
2. lowercase
3. orderby
etc.
We can use these filter simply by adding a pipe character (|) in the expression.
Now we will discuss a custom filter and how to use that filter in our html code. Lets have an example:
HTML:
<body ng-app="testFilter">
<div ng-controller="filterCntrl">
<h1>{{ originalText }}</h1>
<h2>{{ filteredText | uppercase }}</h2>
<h3>{{ filteredText | customFilter }}</h3>
</div>
</body>
Script:
angular.module('testFilter', [])
.controller('filterCntrl', function($scope, $filter) {
$scope.originalText = 'hello';
$scope.filteredText = $filter('uppercase')($scope.originalText);
});
Now the custom filter:
app.filter('customFilter ', function() {
return function(input) {
if(isNaN(input)){
return input;
} else {
var newInput = input+1;
return newInput;
}
}
});
This is how to you can create a logic in the filter and use that filter in your html.
0 Comment(s)