Say I create an Angular app and write some new filters: Show only odds, and show only lucky numbers.
There's an oddList filter and a luckyList filter:
var app = angular.module('app', []);
app.filter('oddList', function() {
return function(items) {
var filtered = [];
angular.forEach(items, function(item) {
if (item % 2 !== 0)
filtered.push(item);
});
return filtered;
};
});
app.filter('luckyList', function() {
return function(items) {
var filtered = [];
angular.forEach(items, function(item) {
if (item === 2 || item === 7 || item === 11)
filtered.push(item);
});
return filtered;
};
});
In the view portion, I can chain these filters:
<ul><li ng-repeat="number in numbers | oddList | luckyList">{$number}</li></ul>
When this works, I should see 7 and 11 remaining.
I want to make my filters variable for this ng-repeat. Is there something I can do that's similar to this process?
Say I name the variable filter filter:listFilter so that in our controller, we can dynamically update $scope.listFilter.
<ul><li ng-repeat="number in numbers | filter:listFilter">{$number}</li></ul>
And the controller with pseudo code:
app.controller('main', function($scope, $filter) {
$scope.numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
$scope.listFilter = $filter('oddList | luckyList');
});
Any idea how I could chain (variable) filters in the controller? Would like to be able to toggle between just odd, just lucky and/or both.
