2

Just like the question provider in This question, I am building a filter that filters on multiple values.

However, in my situation, I also want to have the filters created dynamically from an array.

So, for this example, instead of 

<input type="checkbox" ng-model="genrefilters.action" />Action

<input type="checkbox" ng-model="genrefilters.family" />Family

I want to ng-repeat like this to create the input boxes:

<div ng-repeat="distinctgenre in distinctgenres'">
    <input type="checkbox" ng-model="genrefilters.distinctgenre"/{{distinctgenre}}
</div>

However, when I do this, my filter, which is the same as in the original question:

.filter('bygenre', function () {
return function (movies, genrefilters) {
    var items = {
        genrefilters: genrefilters,
        out: []
    };
    angular.forEach(movies, function (value, key) {
        if (this.genrefilters[value.genre] === true) {   // <=== THIS LINE ERRORS OUT
            this.out.push(value);
        }
    }, items);
    return items.out;
};

Errors out, with TypeError: Cannot read property 'Action' of undefined.

I am using the filter like so.

<tr ng-repeat="movie in displayedmovies | byCohort:genrefilters">
    {{movie}}

Any assistance would be appreciated.

Thanks to dfsq for the reminder on bracket notation. That seems to be the main issue. (I also had some other dumb naming convention issues)

Community
  • 1
  • 1
Xgongiveittoya
  • 753
  • 1
  • 14
  • 33

1 Answers1

1

You should generate filter inputs using bracket notation:

<div ng-repeat="distinctgenre in distinctgenres'">
    <input type="checkbox" ng-model="genrefilters[distinctgenre]" /> {{distinctgenre}}
</div>
dfsq
  • 191,768
  • 25
  • 236
  • 258
  • Goddammit, I knew it was gonna be something dumb. I'll check it when I get back from lunch but this is probably the correct answer. – Xgongiveittoya Jan 08 '16 at 18:11