CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatundefinedangular-filters
Xgongiveittoya
Xgongiveittoya

Reputation: 753

How to filter multiple dynamic values in angularJS

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)

Upvotes: 2

Views: 640

Answers (1)

dfsq
dfsq

Reputation: 193261

You should generate filter inputs using bracket notation:

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

Upvotes: 1

Related Questions