user3438917 user3438917 - 2 months ago 10
AngularJS Question

Angular search not filtering properly

I have a list of JSON data that I need to be able to filter by typing a name in. The results should then only display those listings which have that name in the result. It is currently just hiding the other names, and still showing all of the other listings.

How can I set the filter so that when you type in an actors name, it only shows the movie listings that actor is listed in?

This is the markup used to display the listings, as well as the Angular filter code:

<div class="row" ng-repeat="movies in results | filter:genre">
<div class="col-lg-12">
<div class="well well-sm">
<div class="row">
<div class="col-xs-3 col-md-3 text-center">
<img src="" alt="poster"
class="img-rounded img-responsive" />
</div>
<div class="col-xs-9 col-md-9 section-box">
<h2>
{{movies.Name}}
</h2>
<div class="row rating-desc">
<div class="col-md-12">
<span class="glyphicon glyphicon-time"></span>{{movies.Duration}}<span class="separator">|</span>
<span class="glyphicon glyphicon-signal"></span>{{movies.Rank}}<span class="separator">|</span>
<a class="bookMovie" href="http://www.fandango.com/{{movies.Name}}">Book Now!</a>
</div>
</div>
<hr>
<p>
{{movies.Description}}
</p>
<p ng-repeat="actor in movies.Actors | filter:actor" >
<span ng-bind="actor"></span>
</p>
<hr />
</div>
</div>
</div>
</div>
</div>


The JSON and rest of the code can be seen in this plunker:
https://plnkr.co/edit/ZmxaSRg9ir0qlNNtOyCd?p=preview

Answer

Thats because you should put the actor filter in your parent ng-repeat, check below plnkr:

https://plnkr.co/edit/k1JVXL0Cpxysjhn2tNx7?p=preview

<div class="row" ng-repeat="movies in results | filter:actor | filter:genre">