在自定义过滤器中调用$ scope（angular）

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) {
...

2. 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