Question

我有一系列像我那样显示的人：

<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>

我的过滤器绑定到文本输入字段。

现在我想在输入字段中输入多个搜索标准（按空格分隔）。像“peter 28 berlin”之类的东西。现在，Angular应该只在“28” livin “berlin”中显示名为“peter”的人。

有没有一种简单的方法可以实现这一目标？

Answer 1

如果您需要此功能，则必须编写自定义过滤器。但它并不是那么复杂。

＆＃13;

var app = angular.module('filter', [])
app.controller('MainController', function($scope) {
    $scope.persons = [
        {name: 'Peter', age: 28, city: 'Berlin'},
        {name: 'Malik', age: 23, city: 'London'},
        {name: 'Sofia', age: 31, city: 'Paris'},
    ];
});


// filterBy implementation
app.filter('filterBy', function() {
    return function(array, query) {
    
        var parts = query && query.trim().split(/\s+/),
            keys = Object.keys(array[0]);
    
        if (!parts || !parts.length) return array;
    
        return array.filter(function(obj) {
            return parts.every(function(part) {
                return keys.some(function(key) {
                    return String(obj[key]).toLowerCase().indexOf(part.toLowerCase()) > -1;
                });
            });
        });
    };
});

＆＃13;

.section {padding: 10px; margin-top: 10px; background: #EEE;}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<div ng-app="filter" ng-controller="MainController">
    <input type="text" ng-model="filter">
    <div class="section" ng-repeat="person in persons | filterBy:filter">
        <div>{{person.name}}</div>
        <div>{{person.age}}</div>
        <div>{{person.city}}</div>
    </div>
</div>

＆＃13;

Answer 2

不可能（或者至少不是很容易）做你所问的事情，因为需要有一些逻辑来确定对象上的属性（姓名，年龄，城市，国家......）这个词应该匹配。但是，您可以输入您的输入属性：值对，如：'name：peter age：28 city：berlin'并使用以下代码（注意，它是伪代码，因此它可能包含小错误）：

<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;
    }
};

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

，除非您在输入中添加某种类型的去抖动以限制过滤，否则您可能会在列表中看到大量跳跃/闪烁
上面的实现只与属性相同，所以如果你有一个名为peter的人，那么'name：pet'的过滤器将不起作用。相反，您可能希望更改比较器以检查子字符串。
此实现不适合同一属性上的多个过滤器。例如，如果你想要归还所有姓名为Peter或者名字叫Bob的人，那就行不通。
通常，当您想要通过多个属性开始过滤时，最好构建过滤界面而不是使用单个输入字段。
如果这将成为您应用的一大特色，您可能需要考虑将过滤转移到应用的服务器端（如果存在）。

使用AngularJS

2 个答案: