使用AngularJS在一个输入字段中输入多个过滤器值（按空格分隔）

我有一系列的人，我会这样显示：

<div ng-repeat="person in persons | filterBy:filter">
  <div>{{person.name}}</div>
  <div>{{person.age}}</div>
  <div>{{person.city}}</div>
  <div>{{person.country}}</div>
</div>

{{person.name}
{{person.age}
{{person.city}
{{个人.国家}

我的筛选器绑定到文本输入字段

现在我想在我的输入字段中输入多个搜索标准（用空格分隔）。类似于“彼得·伯林28号”。现在，我们应该只在“柏林”展示28岁的利文，名叫“彼得”的人

有没有一种简单的方法可以做到这一点？

按照您的要求去做是不可能的（或者至少不是很容易的），因为需要一些逻辑来确定对象上的哪些属性（名称、年龄、城市、国家等）每个词都应该匹配。但是，您可以输入输入属性：值对，例如：“name:peter age:28 city:berlin”，并使用以下代码（注意，这是伪代码，因此可能包含小错误）：

{{person.name}
{{person.age}
{{person.city}
{{个人.国家}
$scope.myPersonFilter（个人）{
if（$scope.inputFilter）{
变量过滤器=$scope.inputFilter.split（“”）；
var isMatch=true；
filters.forEach（函数（过滤器）{
var pair=filter.split（“：”）；
如果（pair.length==2）{
isMatch=（isMatch&&（person[pair[0]]==pair[1]）；
}
});
返回isMatch；
}
};

请注意，有很多事情需要记住：

• 当您键入时，您可能会在列表中看到很多跳跃/闪烁，除非您向输入添加某种类型的去抖动以限制过滤

• 上面的实现只与属性进行比较，因此如果您有一个名为peter的人，那么“name:pet”的过滤器将无法工作。相反，您可能希望更改比较器以检查子字符串

• 此实现不适合同一属性上的多个筛选器。例如，如果您希望返回所有名为Peter或Bob的人，那么它将无法正常工作

• 通常，当您希望开始按多个属性进行筛选时，最好构建一个筛选接口，而不是使用单个输入字段

如果这将是你的应用程序的一大特色，你可能想考虑将过滤移动到应用程序的服务器端（如果存在的话）。

---

如果需要此功能，您必须编写自定义筛选器。但其实并没有那么复杂

var-app=angular.module（'filter'，[]）
应用控制器（'MainController'，功能（$scope）{
$scope.persons=[
{姓名：'彼得'，年龄：28岁，城市：'柏林'}，
{姓名：'Malik'，年龄：23岁，城市：'London'}，
{姓名：'索非亚'，年龄：31岁，城市：'巴黎'}，
];
});
//过滤实现
app.filter（'filterBy'，function（）{
返回函数（数组、查询）{
var parts=query&&query.trim（）.split（/\s+/），
keys=Object.keys（数组[0]）；
if（！parts | |！parts.length）返回数组；
返回数组.过滤器（函数（obj）{
返回部件。每个（功能（部件）{
返回键。一些（功能）（键）{
返回字符串（obj[key]）.toLowerCase（）.indexOf（part.toLowerCase（））>-1；
});
});
});
};
});
.section{padding:10px；margin top:10px；background:#EEE；}

{{person.name}
{{person.age}
{{person.city}
非常感谢。。。正是我需要的
<input ng-model="inputFilter"></input>

<div ng-repeat="person in persons | filter:myPersonFilter">
    <div>{{person.name}}</div>
    <div>{{person.age}}</div>
    <div>{{person.city}}</div>
    <div>{{person.country}}</div>
</div>

$scope.myPersonFilter(person) {
    if ($scope.inputFilter) {
        var filters = $scope.inputFilter.split(' ');
        var isMatch = true;

        filters.forEach(function(filter) {
            var pair = filter.split(':');

            if (pair.length === 2) {
                isMatch = (isMatch && (person[pair[0]] == pair[1]));
            }
        });

        return isMatch;
    }
};