javascript - Angular 过滤器包含

Question

我在过滤方面遇到了一些问题。我做了几个按钮:

<button ng-click="myFilter = {terms: advertising}">Advertising</button>
<button ng-click="myFilter = {terms: branding}">Branding</button>
<button ng-click="myFilter = {terms: packaging}">Packaging</button>
<button ng-click="myFilter = {terms: print}">Print</button>

当然我有数组:

 $scope.selects = [
{terms: 'Advertising | Web',},
{terms: 'Branding | Packaging',},
{terms: 'Print | Video',},
{terms: 'Branding | Print',}
  ];  

正如您所看到的，我在一个键中包含了几个术语。我知道我可以使用搜索框进行过滤，而且效果很好。但我必须为此使用按钮。

这个方法:

<article class="select_single" dir-paginate="select in selects | itemsPerPage: pageSize | orderBy:sortorder | filter:myFilter" current-page="currentPage">

仅当我使用与数组中相同的字符串时才有效，但我需要过滤与它们相似的项目。

我尝试创建隐藏输入，然后将按钮 ID 发送到输入值，但随后我需要对此输入进行任何更改才能运行过滤器。

其余代码:

<div ng-controller="MyController" class="my-controller">


        <div id="loop">
            <article class="select_single" dir-paginate="select in selects | itemsPerPage: pageSize | orderBy:sortorder | filter:myFilter" current-page="currentPage">
                <img src="{{ select.img }}">
                <div class="overlay">
                    <div class="text">
                        <h3>{{ select.name }}</h3>
                        <p class="terms">{{ select.terms }} </p>
                        <a href="{{ select.link }}">More Details</a>
                    </div>
                </div>       
            </article>
        </div>

        <div class="sort_handle">
            <div ng-controller="OtherController" class="other-controller pull-right">
                <div class="text-center">
                    <dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="<?php echo get_template_directory_uri(); ?>/templates/pagination.tpl.html"></dir-pagination-controls>
                </div>
            </div>
        </div>
    </div>

所以..

我的问题是如何使用数组键字符串的一部分来过滤这些术语？

Grettings，W

Answer 1

这应该是相当简单的，因为您的过滤器正确地使用了它要过滤的正确结构。

错误是您的搜索过滤器应包含 myFilter.terms 的字符串(注意引号):

<button ng-click="myFilter = {terms: 'advertising'}">Advertising</button>
<button ng-click="myFilter = {terms: 'branding'}">Branding</button>
<button ng-click="myFilter = {terms: 'packaging'}">Packaging</button>
<button ng-click="myFilter = {terms: 'print'}">Print</button>

那么过滤就是:

<div ng-repeat="select in selects | filter: myFilter">
   {{select}}
</div>