ng-filter 按输入的字符串标记答案

【问题标题】：ng-filter by string tokens of inputng-filter 按输入的字符串标记
【发布时间】：2018-02-09 18:44:01
【问题描述】：

我有多个输入字段，我目前正在过滤ng-repeat，就像这样

...
<input class="form-control" type="text" ng-model="itemFilter.id" /> 
<input class="form-control" type="text" ng-model="itemFilter.attr1" /> 
<input class="form-control" type="text" ng-model="itemFilter.attr2" /> 
 ...
<tr ng-repeat="item in $scope.items | filter:itemFilter | orderBy: '-id'  track by $index"> <td>{{item.id}}</td>
</tr>
 ...

如何过滤来自每个输入的标记？

例如，如果 itemFilter.id = "1 2 3" ng-repeat 将包含包含 1、2 或 3 的 id

【问题讨论】：

删除 angular 的标记，因为它只是一个 angularjs 问题
在您的“过滤器”中，您只需传入接受的值，然后您需要确保您的自定义过滤器通过您的输入列表循环接收 2 个参数（输入、参数）并匹配所有如果您有转译器，您可以使用 array.protoype.filter mdn filter 的参数项。
@eli 你能解决你的问题吗？

标签： javascript html angularjs angularjs-scope

【解决方案1】：

正如@Andrei 所述，您必须编写自己的custom filter 才能实现所需的功能。下面的代码说明了如何创建它以及如何传递参数以执行自定义过滤逻辑。

这里的想法是使用split()为每个对象属性构建一个令牌数组，然后使用过滤器数组上的filter()检查项目是否满足过滤器：

(function (angular) {
    'use strict';

    angular.module("demo", [])
        .filter("filterByTokens", function () {
            return function (items, obj) {
                var separator = obj.separator || ' ';
                var keys = Object.keys(obj).filter(function (key) {
                    return key !== 'separator'
                });
                //create filters array
                var filters = keys.map(function (key) {
                    return {
                        key: key,
                        values: (obj[key] || '').split(separator).filter(function (val) {
                            return !!val;
                        })
                    }
                });

                if (!filters.length) return items;

                return items.filter(function (item) {
                    return filters.filter(function (f) {
                        return !f.values || !f.values.length || (f.values.indexOf(item[f.key].toString()) > -1);
                    }).length === filters.length; // we want to check if all filters are satisfied
                });
            };
        })
        .controller('Demo', [function Demo() {
            var vm = this;

            vm.itemFilter = {id:'1 3 5 2 6', name: 'Test5 Test6', separator: ' '};

            vm.items = [
                {id: 1, name: 'Test1'}, {id: 2, name: 'Test2'}, {id: 3, name: 'Test3'},
                {id: 4, name: 'Test4'}, {id: 5, name: 'Test5'}, {id: 6, name: 'Test6'},
            ];
        }]);

})(angular);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="demo" ng-controller="Demo as vm">     
  <hr/>
  <input class="form-control" type="text" ng-model="vm.itemFilter.id" placeholder="itemFilter.ids"/> 
  <input class="form-control" type="text" ng-model="vm.itemFilter.name" placeholder="vm.itemFilter.names"/> 
  <hr/>
  <code>Filter: {{vm.itemFilter}}</code>
  <hr/>
  <div ng-repeat="item in vm.items | filterByTokens:vm.itemFilter | orderBy: '-id'  track by item.id"> 
    <span>
      {{item.id}}
    </span>
    <span>
      {{item.name}}
    </span>
  </div>  
</div>

P.S.：可能不是最高效的解决方案，而只是演示如何使用 filters 实现这一点。

【讨论】：