My AngularJS app has multiple age range filters implemented, but one of them is not functioning correctly and I can't figure out why.
You can view a functional example here.
The various filters are defined as follows:
.filter('five', function () {
return function ( items, filter) {
if(filter) return items.filter(x => x.age <= 4);
else return items;
}
})
.filter('child', function () {
return function ( items, filter) {
if(filter) return (items.filter(x => x.age >= 5) && items.filter(x => x.age <= 14));
else return items;
}
})
.filter('young', function () {
return function ( items, filter) {
if(filter) return (items.filter(x => x.age >= 14) && items.filter(x => x.age <= 17));
else return items;
}
})
.filter('adult', function () {
return function ( items, filter) {
if(filter) return items.filter(x => x.age >= 18);
else return items;
}
})
In the view, the filters are applied like this:
<div ng-repeat="item in data
| five:fiveFilter
| adult:adultFilter
| young:youngFilter
| child:childFilter">
{{item.age}}
</div>
While all filters are working properly, the young filter seems to be malfunctioning. Any ideas on what might be causing this issue?