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

【问题标题】：Angular.JS filter items using selected option in select dropdownAngular.JS 使用选择下拉列表中的选定选项过滤项目
【发布时间】：2015-08-15 09:47:12
【问题描述】：

使用WP API 我正在从 JSON 文件将帖子列表输出到页面上。我正在尝试使用一个输入字段和两个选择来过滤这些帖子。目前，当我搜索可以正常工作的帖子标题时，我可以通过输入字段 (searchrecipe) 过滤帖子。

当我从其中一个选项中选择一个选项时，我不确定如何过滤帖子。有两种选择，一种包含所有使用的标签，一种包含所有类别。

所以要明确一点，我的问题是当我从选择下拉列表中选择一个选项时，我不知道如何过滤帖子。

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

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>

【问题讨论】：

这种情况下可以像这里stackoverflow.com/questions/13216115/…这样写一个过滤函数
或者创建一个自定义过滤器？

标签： json angularjs wordpress filter angularjs-filter

【解决方案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>

【讨论】：