AngularJS ng-repeat filter, function over object property

Question

I am looking for a way to check for each movie if the movie has the category which is selected. Movies is an array which contains objects, those objects have some properties, like you can see in the code below. The categories property is a array of categories where the movie is in. Now there is a variable selectedCategories where the current selected category is stored in.

I don't want to use custom filters, because I think it has te be possible with this one, I just can't quite get it. In the javascript function there can't be changed too much either.

If the return of hasSelectedCategory is true, then it has to execute the block, if false not.

Thanks in advance.

//in the javascript file
scope.hasSelectedCategory = function(categories){
    var hasCategory = false;
    if (categories.indexOf(scope.selectedCategory) !== -1){
        hasCategory = true;
    }
    return hasCategory;
};
//in the html file
<div class="movieListItem {{listItemView}}" ng-repeat="movie in movies | filter:{hasSelectedCategory(categories): true}">
    <h4>{{movie.title}}</h4>
    <a href="http://www.youtube.com/embed/{{movie.youtubeId}}?rel=0&autoplay=1"> 
    <img ng-src="{{findPosterSource(movie)}}" class="poster"> </a>
    <p ng-hide="listItemView === 'grid'">
        {{movie.description}}
    </p>
    <div class="categories" >
        <span ng-repeat="category in movie.categories"> <a ng-href="#">{{category}}</a> </span>
    </div>
</div>

bmleite · Accepted Answer · 2014-09-18 13:01:31Z

1

You have to use the filter like this:

ng-repeat="movie in movies | filter:hasSelectedCategory"

The hasSelectedCategory function will be invoked for each movie in the movies list. In order to filter by selected categories you can use a function like this:

$scope.hasSelectedCategory = function(movie) {
  var hasCategory = false;
  angular.forEach($scope.selectedCategories, function(selectedCategory) {
    if (!hasCategory && movie.categories.indexOf(selectedCategory) !== -1) {
      hasCategory = true;
    }
  });
  return hasCategory;
};

Demo (plunker)

answered Sep 18, 2014 at 13:01

bmleite

26.9k4 gold badges74 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS ng-repeat filter, function over object property

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related