Filters can be applied to the result of another filter. This is called "chaining" and uses the following syntax: {{ expression | filter1 | filter2 | ... }} E.g. the markup {{ 1234 | number:2 }} formats the number 1234 with 2 decimal points using the number filter.
Using the filter filter you won't be able to pass in a parameter but there are at least two things you can do. 1) Set the data you want to filter by in a scope variable and reference that in your filter function like this fiddle. 2) Create a new filter that takes in a parameter like this fiddle.
Filters can be added to expressions by using the pipe character | , followed by a filter.
AngularJS Filters allow us to format the data to display on UI without changing original format. Filters can be used with an expression or directives using pipe | sign. Angular includes various filters to format data of different data types.
In templates, you can separate filter arguments by colons.
{{ yourExpression | yourFilter: arg1:arg2:... }}
From Javascript, you call it as
$filter('yourFilter')(yourExpression, arg1, arg2, ...)
There is actually an example hidden in the orderBy filter docs.
Example:
Let's say you make a filter that can replace things with regular expressions:
myApp.filter("regexReplace", function() { // register new filter
return function(input, searchRegex, replaceRegex) { // filter arguments
return input.replace(RegExp(searchRegex), replaceRegex); // implementation
};
});
Invocation in a template to censor out all digits:
<p>{{ myText | regexReplace: '[0-9]':'X' }}</p>
i mentioned in the below where i have mentioned the custom filter also , how to call these filter which is having two parameters
countryApp.filter('reverse', function() {
return function(input, uppercase) {
var out = '';
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
}
if (uppercase) {
out = out.toUpperCase();
}
return out;
}
});
and from the html using the template we can call that filter like below
<h1>{{inputString| reverse:true }}</h1>
here if you see , the first parameter is inputString and second parameter is true which is combined with "reverse' using the : symbol
If you want to call your filter inside ng-options the code will be as follows:
ng-options="productSize as ( productSize | sizeWithPrice: product ) for productSize in productSizes track by productSize.id"
where the filter is sizeWithPriceFilter and it has two parameters product and productSize
like this:
var items = $filter('filter')(array, {Column1:false,Column2:'Pending'});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With