在选择下拉列表中使用选定选项的Angular.JS过滤器项目

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>

Answer 1

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>