Angular.JS filter items using selected option in select dropdown

Question

Using the WP API I am outputting a list of posts onto a page from the JSON file. I am trying to filter these posts using an input field and two selects. Currently I am able to filter the posts through the input field (searchrecipe) when I search for a title of a post which works fine.

What I have unsure of how to do is filter the posts when I select an option from one of the selects. There are two selects, one which contains all tags used and one which contains all categories.

So to be clear, my problem is I do not know how to filter the posts when I select an option from a select drop down.

Any help would be great. Thanks!

Search: <input ng-model="searchrecipe">

<select ng-model="categories" ng-options="category.name for category in categoryList"></select>
<select ng-model="tags" ng-options="tag.name for tag in tagsList"></select>

<article ng-repeat="post in posts | filter:searchrecipe">
    <h3>
        <a href="{{ post.link }}">
            {{ post.title }}
        </a>
    </h3>
    <p ng-repeat="category in post.terms.category">
        {{category.name }}
    </p>
    <p ng-repeat="tag in post.terms.post_tag">
        {{ tag.name }}
    </p>
</article>

This case you can write a filter function like here http://stackoverflow.com/questions/13216115/filtering-by-multiple-specific-model-properties-in-angularjs-in-or-relationship — Igor Popov, Jun 01 '15 at 19:56

score 1 · Accepted Answer · answered Jun 01 '15 at 20:34

Just replace your html:

     Search: <input ng-model="searchrecipe">

     <select ng-model="category" ng-options="category.name for category in categoryList"></select>
     <select ng-model="post_tag" ng-options="post_tag.name for post_tag in tagsList"></select>

     <article ng-repeat="post in posts | filter:searchrecipe | filter:category.name | filter:post_tag.name ">
        <h3>
           <a href="{{ post.link }}">
              {{ post.title }}
           </a>
        </h3>
        <p ng-repeat="category in post.terms.category">
           {{category.name }}
        </p>
        <p ng-repeat="tag in post.terms.post_tag">
           {{ tag.name }}
        </p>
     </article>

Angular.JS filter items using selected option in select dropdown

1 Answers1