带有嵌套 ng-repeat 的 AngularJS 过滤器数组

Question

我有这个嵌套列表，我想根据包含字符串数组（剑道多选择器）的searchKey输入进行过滤。 过滤器字段应该是{{ child.name }}字段，过滤器结果应该应用于colection.items 中第一个 ng-repeat项目的主要元素

我不知道如何根据剑道输入中的关键字数组过滤这个值数组。 我尝试了这个类似的案例，但没有成功。 基于字符串数组的AngularJS过滤器？ . 任何帮助将不胜感激。

<div ng-app="ngApp">
<div ng-controller="ngAppController">
    <div id="filtering">                    
        <input id="searchKey" type="text" placeholder="Search keys" ng-model="listSearch" />
    </div>
    <ul id="allItems" infinite-scroll="colection.nextPage()"
        infinite-scroll-distance="0"
        infinite-scroll-disabled='colection.busy || colection.finished'>
        <li ng-repeat="item in colection.items | filter:listSearch"
            ng-show="colection.items.length > 0"
            class="block-grid-item">
            <a href="javascript: void(0);" data-detail="{{ item.Id }}">
                <div class="imageWrap" style="background-image:url({{ item.thumb }});">

                    <div class="filetypeContainer"><span>{{ item.fileFormatIdentifier }}</span></div>
                    <ul>
                        <li ng-repeat="child in item.categories" style="list-style: none; display: inline-block;">
                            <code style="font-size:11px;">{{ child.name }} </code>
                        </li>
                    </ul>
                    <div class="infoContainer">i</div>
                </div>
            </a>
        </li>
    </ul>

Answer 1

鉴于我正确地得到了你的问题陈述，你过滤什么并不重要，只要你能以某种方式检查一个项目（并查看它的categories ）并判断它是否适合你。 正如您发现的答案指出的那样，您可以制作一个过滤器（为清楚起见，将其multiSelectFilter ）

<div ng-app="ngApp">
<div ng-controller="ngAppController">
    <div id="filtering">                    
        <select kendo-multi-select k-options="selectOptions" k-ng-model="listSearch"></select> <!-- note custom kendo directives. See more documentation here: https://demos.telerik.com/kendo-ui/multiselect/angular  -->
    </div>
    <ul id="allItems">
        <li ng-repeat="item in colection.items | multiSelectFilter:listSearch"
            ng-show="colection.items.length > 0"
            class="block-grid-item">
            <a href="javascript: void(0);" data-detail="{{ item.Id }}">
                <div class="imageWrap" style="background-image:url({{ item.thumb }});">

                    <div class="filetypeContainer"><span>{{ item.fileFormatIdentifier }}</span></div>
                    <ul>
                        <li ng-repeat="child in item.categories" style="list-style: none; display: inline-block;">
                            <code style="font-size:11px;">{{ child.name }} </code>
                        </li>
                    </ul>
                    <div class="infoContainer">i</div>
                </div>
            </a>
        </li>
    </ul>
  </div>
</div>

var app = angular.module('ngApp', ['kendo.directives']);

app.controller("ngAppController", function($scope){
      $scope.listItems = [{name:'Baseball'}, {name:'Basketball'}, {name:'Cricket'}, {name:'Field Hockey'}, {name:'Football'}, {name:'Table Tennis'}, {name:'Tennis'}, {name:'Volleyball'}];
      $scope.colection = {items: [
       {id:0, thumb: '0', fileFormatIdentifier :'1', categories: [{name:'Baseball'}, {name:'Basketball'}]},
        {id:1, thumb: '1', fileFormatIdentifier :'2', categories: [{name:'Cricket'}]},
        {id:2, thumb: '2', fileFormatIdentifier :'3', categories: [{name:'Field Hockey'}, {name:'Football'}]},
        {id:3, thumb: '3', fileFormatIdentifier :'4', categories: [{name:'Tennis'}, {name:'Volleyball'}]},
      ]                           
                          };
      $scope.listSearch = [];
      $scope.selectOptions = {
            placeholder: "Select products...",
            valuePrimitive: true,
            dataTextField: "name",
            dataValueField: "name",
            autoBind: false,
            dataSource: $scope.listItems
        };
});   

app.filter('multiSelectFilter', function() {
    return function(items, listSearch) {
        return items.filter(function(item) {
            if(listSearch.length === 0) 
              return true; // suppose we don't want to filter if no condition was set          
            var result = false
            result = item.categories.some((child) => {
              return listSearch.some((listSearchItem) => { 
                return (child.name === listSearchItem); // return true if we've got a match
            });
            });      
          return result;
        });
    };
});

这是工作代码笔： https : //codepen.io/timur_kh/pen/xxGVzLv 。