A filter formats a value of an expression and are executed when an input to the filter function is changed.
Below is an example of a custom filter that will go through a list of types of pet and filter out any that are not a breed of dog:
angular.module('myApp', [])
.filter('removedogs', function() {
return function(input) {
var out = [];
angular.forEach(input, function(pet) {
if(pet != 'Cocker Spaniel' && pet != 'Labrador')
out.push(pet);
});
return out;
}
});
Applying the filter to a view is simple
<!-- ['Goldfish','Siamese cat','Dwarf lop'] -->
<div ng-repeat="pet in ['Goldfish','Cocker Spaniel','Siamese cat','Labrador','Dwarf lop'] | removedogs">
{{pet}}
</div>
Filters that are defined at the module level like above are available at the global level and can be used in HTLM wherever the filter is required.