基于多选下拉的角度滤波器

Question

我使用nya-bootstrap-select指令（http://nya.io/nya-bootstrap-select/） 对于多选下拉（Angular 1.5.8）。 现在我想基于所选选项过滤集合。

示例：

https://jsfiddle.net/mrtzdev/2z6xfo5w/18/

<ol id="dynamic-options" class="nya-bs-select" ng-model="model2" multiple >
  <li nya-bs-option="(key,value) in companyList" >
    <a>{{ value.name}}</a>
  </li>
</ol>

过滤后的收藏：

<tbody>
        <tr ng-repeat="client in clients | filter:{ name: model1.name, company: { name: model2.name } } ">
            <td>{{$index + 1}}</td>
            <td><em>{{client.name}}</em>

            </td>
            <td>{{client.designation}}</td>
            <td>{{client.company.name}}</td>
        </tr>
    </tbody>

这显然不适用于多选。如何使用自定义过滤器来过滤多选选项？

Answer 1

我修改了您的fiddle并使其正常运行。此过滤器在动态处理方面效果不佳，但它允许您按照完全过滤器属性name过滤数据。

视图

<tr ng-repeat="client in clients | filter:{ name: model1.name} | inArrayExact : { myArray: model2, searchKey: 'name', filterKey: 'company' }">
    <td>{{$index + 1}}</td>
    <td><em>{{client.name}}</em>

    </td>
    <td>{{client.designation}}</td>
    <td>{{client.company.name}}</td>
</tr>

AngularJS自定义过滤器

App.filter('inArrayExact', function($filter){
    return function(list, arrayFilter, element){
        if((angular.isArray(arrayFilter.myArray) && arrayFilter.myArray.lenght > 0) &&  || angular.isObject(arrayFilter.myArray)){
            var itemsFound = {};
            angular.forEach(list, function (listItem, key) {
              angular.forEach(arrayFilter.myArray, function (filterItem) {
                 if (angular.isDefined(filterItem[arrayFilter.searchKey]) 
                 && angular.isDefined(listItem[arrayFilter.filterKey])
                 && angular.isDefined(listItem[arrayFilter.filterKey][arrayFilter.searchKey])) {
                   if (angular.isUndefined(itemsFound[key]) 
                   && listItem[arrayFilter.filterKey][arrayFilter.searchKey] == filterItem[arrayFilter.searchKey]) {
                      itemsFound[key] = listItem;
                   }
                 }
              });
            });
            return itemsFound;
        } else {
          return list;
        }
    };
});

Answer 2

model2是一个数组对象而不是一个字符串，你需要创建一个自定义过滤器，你传递model2并遍历对象并检查名称。

您可以查看此链接，了解如何构建自定义过滤器

https://toddmotto.com/everything-about-custom-filters-in-angular-js/