I have an array that looks like this:
[
{
'age':5
},
{
'age':12
},
{
'age':51
},
]
I display the data using an ng-repeat list and I wish to be able to filter through the list using severl checkboxes with integer comparision, for example, age = 5 < 0 and age = 14 < 5.
I've used checkbox filters before, but right now I can't seem to figure out a way to deal with this..
I've tried the following but no luck:
.filter('five', function () {
return function (input, age) {
var output = [];
if (isNaN(age)) {
output = input;
}
else {
angular.forEach(input, function (item) {
if (item.age < 5) {
output.push(item)
}
});
}
return output;
}
})
In combination with:
<input type="checkbox" id="five" ng-model="fivemodel" ng-change="fivemodel = fivemodel ? true : undefined">
<label for="five="> <5 yo </label>
<div ng-repeat="item in items | five"></div>
Any tips?
See Plunkr for reference.
See working example here
Check on checkbox will filter result having age <=5; and uncheck will show all results
<!DOCTYPE html>
<html ng-app="test">
<head>
<script data-require="[email protected]" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="wop">
<input type="checkbox" id="five" ng-model="fiveFilter" >
<label for="five="> 5 yo </label>
<div ng-repeat="item in data |five:fiveFilter">{{item.age}}</div>
</body>
</html>
<script>
// Code goes here
angular.module('test',[])
.controller('wop',['$scope', function($scope){
// DEFINE DATE DEFAULTS
$scope.data = [
{
'age':5
},
{
'age':12
},
{
'age':51
},
];
}])
.filter('five', function () {
return function ( items,filter) {
if(filter)return items.filter(x=>x.age<=5);
else return items;
}
})
</script>