Angular Filters
Occasionally you will want to access the result of your filters from outside the ng-repeat, perhaps to indicate the number of items that have been filtered out. You can do this using as [variablename] syntax on the ng-repeat.
<ul>
<li ng-repeat="item in vm.listItems | filter:vm.myFilter as filtered">
{{item.name}}
</li>
</ul>
<span>Showing {{filtered.length}} of {{vm.listItems.length}}</span>Custom filter to remove values
A typical use case for a filter is to remove values from an array. In this example we pass in an array and remove any nulls found in it, returning the array.
function removeNulls() {
return function(list) {
for (var i = list.length - 1; i >= 0; i--) {
if (typeof list[i] === 'undefined' ||
list[i] === null) {
list.splice(i, 1);
}
}
return list;
};
}That would be used in the HTML like
{{listOfItems | removeNulls}}or in a controller like
listOfItems = removeNullsFilter(listOfItems);Custom filter to format values
Another use case for filters is to format a single value. In this example, we pass in a value and we are returned an appropriate true boolean value.
function convertToBooleanValue() {
return function(input) {
if (typeof input !== 'undefined' &&
input !== null &&
(input === true || input === 1 || input === '1' || input
.toString().toLowerCase() === 'true')) {
return true;
}
return false;
};
}Which in the HTML would be used like this:
{{isAvailable | convertToBooleanValue}}Or in a controller like:
var available = convertToBooleanValueFilter(isAvailable);