Angular.JS 使用 select 下拉列表中的 selected 选项过滤项目

Question

我使用 WP API 将 post 的列表从 JSON 文件输出到页面上。我正在尝试使用一个输入字段和两个 select 来过滤这些 post。目前，当我搜索 post 的标题时，我可以通过输入字段 (searchrecipe) 过滤 posts，效果很好。

当我 select 来自 select 之一的选项时，我不确定如何过滤 post。有两个 select，一个包含所有使用的标签，一个包含所有类别。

明确地说，我的问题是当我从 select 下拉列表中选择 select 选项时，我不知道如何过滤 post。

任何帮助都会很棒。谢谢！

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

只需更换您的 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 使用 select 下拉列表中的 selected 选项过滤项目

Angular.JS filter items using selected option in select dropdown

json

angularjs

wordpress

filter

angularjs-filter