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 stackoverflow.com/questions/13216115/… — Igor Popov
– Igor Popov, Commented Jun 1, 2015 at 19:56

Lucas L Roselli · Accepted Answer · 2015-06-01 20:34:00Z

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>

answered Jun 1, 2015 at 20:34

Lucas L Roselli

2,8301 gold badge17 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Angular.JS filter items using selected option in select dropdown

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related