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

时间:2015-06-01 19:41:53

标签: json angularjs wordpress filter angularjs-filter

使用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>

1 个答案:

答案 0 :(得分: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>