Calling $scope in custom filter (angular) - arrays

Question

I'm using this angular filter to filter out objects in an array whose localteam_id properties match a value that is held in $scope.whichMyteam. This works fine.
VIEW
<div ng-repeat="fixture in getFixtures | filter: {localteam_id: whichMyteam} ">
I want to extend the filter however, to include a section criterion: so it will, in effect, be:
<div ng-repeat="fixture in getFixtures | filter: {localteam_id: whichMyteam && visitorteam_id: whichMyteam} ">
...but a) this doesn't work, and b) even if it did, it's getting a little cumbersome and seems that it would justify making a custom filter.
So, I tried to make one. The problem I ran into is I need to reference the $scope.whichMyteam value in the filter, but it seems the filter module can't accept/understand $scope. This is crucial for the filter to work in my instance, so I'm not sure how to resolve this.
My filter so far looks like this:
app.filter('myFixtures', function() {
return function(input) {
angular.forEach(input, function(o) {
output = [];
if (o.localteam_id === $scope.whichMyteam) {
output.push(o);
}
return output;
})
};
});
The above is a simplified version which only attempts to match one property (just did this to test it and reduce the number of moving parts). When I call it in the view though...
<div ng-repeat="fixture in getFixtures | myFixtures">
...it doesn't work. Console logs '$scope is not defined'.
UPDATE: I tried this, still not working!
FILTER
var myFilters = angular.module('myFilters', [])
myFilters.filter('myFixtures', function(whichMyteam) {
return function(input) {
angular.forEach(input, function(o) {
output = [];
if (o.localteam_id === whichMyteam) {
output.push(o);
}
return output;
})
}
});
VIEW
<div ng-repeat="fixture in getFixtures | myFixtures(whichMyteam)">
Console is logging a syntax error (I think...)
angular.js:13236 Error: [$parse:syntax]

Answer 1

How about having your filter function return a function.
app.filter('myFixtures', function() {
return function(input, whichMyteam) {
output = [];
angular.forEach(input, function(o) {
if (o.localteam_id === whichMyteam) {
output.push(o);
}
})
return output;
};
});
Then call the filter function passing in your variable
<div ng-repeat='fixture in getFixtures | myFixtures:whichMyteam'>
--- example
angular
.module('app', [])
.filter('otherFilter', otherFilter)
.controller('controller', controller);
controller.$inject = ['$scope'];
function controller($scope) {
$scope.things = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
$scope.modVal = 2;
console.log('controller');
$scope.myFilter = function(x) {
return function(y) {
return (y % x) === 0;
}
};
}
function otherFilter() {
return function(y, x) {
var out = [];
angular.forEach(y, function(val) {
if ((val % x) === 0) {
out.push(val)
}
});
return out;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='controller'>
<div ng-repeat='thing in things | filter:myFilter(modVal)'>
{{ thing }}
</div>
<br/>
<div ng-repeat='thing in things | otherFilter:modVal'>
{{ thing }}
</div>
</div>

Answer 2

You have 2 problems here:
1. How to pass a param, html:
<div ng-repeat="fixture in getFixtures | myFixtures:whichMyteam">
js:
myFilters.filter('myFixtures', function() {
return function(input, whichMyteam) {
...
Do not place return statement inside forEach -- it does not make what you think;)
So finally your filter is:
myFilters.filter('myFixtures', function() {
return function(input, whichMyteam) {
output = [];
angular.forEach(input, function(o) {
if (o.localteam_id === whichMyteam) {
output.push(o);
}
})
return output;
}
});
http://plnkr.co/edit/0XFfI8hIdCaJ19gJRYr2?p=preview