情况:

我有一个使用 angular ui-select 的 Angular 应用程序从数据库中搜索和选择人员。

除一件事外，它工作正常。 用户应该能够使用两个标准在人员中进行过滤:姓名和电子邮件。

使用普通 Angular 过滤器，我只能过滤其中一个。 如果我尝试过滤这两个字段，它就不再起作用了。

一个领域的工作示例:

 <ui-select multiple ng-model="database_people.selectedPeople" theme="select2" ng-disabled="disabled" style="width:100%">

    <ui-select-match placeholder="Select person...">{{$item.name}} &lt; {{$item.email}} &gt;</ui-select-match>

    <ui-select-choices repeat="person2 in list_people | filter: {name: $select.search, db_data_type_id: 5}">

            <div ng-bind-html="person2.name | highlight: $select.search"></div>

                <small>
                    email: <span ng-bind-html="''+person2.email | highlight: $select.search"></span>
               </small>

    </ui-select-choices>

 </ui-select>

过滤器中有两个字段的不工作示例:

 <ui-select multiple ng-model="database_people.selectedPeople" theme="select2" ng-disabled="disabled" style="width:100%">

    <ui-select-match placeholder="Select person...">{{$item.name}} &lt; {{$item.email}} &gt;</ui-select-match>

    <ui-select-choices repeat="person2 in list_people | filter: {name: $select.search, email: $select.search, db_data_type_id: 5}">

            <div ng-bind-html="person2.name | highlight: $select.search"></div>

                <small>
                    email: <span ng-bind-html="''+person2.email | highlight: $select.search"></span>
               </small>

    </ui-select-choices>

 </ui-select>

奇怪的是它实际上只对第一个字符有效。 当我键入第一个字符时，它会在姓名和电子邮件这两个字段中突出显示。 但是当我输入第二个字符时，它不再起作用了 (我在控制台中没有错误)。

尝试使用来自 ANGULAR SAMPLES 的 PROPSFILTER :

 <ui-select multiple ng-model="database_people.selectedPeople" theme="select2" ng-disabled="disabled" style="width:100%">

    <ui-select-match placeholder="Select person...">{{$item.name}} &lt; {{$item.email}} &gt;</ui-select-match>

    <ui-select-choices repeat="person2 in list_people | propsFilter: {name: $select.search, email: $select.search, db_data_type_id: 5}">

            <div ng-bind-html="person2.name | highlight: $select.search"></div>

                <small>
                    email: <span ng-bind-html="''+person2.email | highlight: $select.search"></span>
               </small>

    </ui-select-choices>

 </ui-select>

在这种情况下，它完全崩溃了，select2 中不再有数据，我在控制台中收到一些错误:

Cannot read property 'toString' of null

Cannot read property 'length' of undefined

问题:

如何在多个字段之间进行过滤？ 我可以使用普通过滤器来做到这一点吗？ 或者我必须使用自定义过滤器？ 但是在这种情况下，为什么不能正常工作呢？

非常感谢!

最佳答案

您可以使用如下的属性过滤器

 <ui-select   ng-model="emplyee" theme="bootstrap">
 <ui-select-match placeholder="Select ...">{{$select.selected.firstName+" "+$select.selected.lastName}}</ui-select-match>
 <ui-select-choices repeat="emp in employees | propertyFilter: {firstName:$select.search, lastName:$select.search}">
 <span ng-bind-html="emp.firstName+' '+emp.lastName | highlight: $select.search"></span>
 </ui-select-choices>

您必须像下面这样修改 propertyFilter:

.filter('propertyFilter', function($log) {
 return function(items, props) {
    var out = [];
    if (angular.isArray(items)) {
    items.forEach(function(item) {
        var itemMatches = false;
        var keys = Object.keys(props);
        var optionValue = '';
        for (var i = 0; i < keys.length; i++) {
             optionValue = item[keys[i]] ? optionValue + item[keys[i]].toString().toLowerCase().replace(/ /g, '') : '';
        }
        for (var j = 0; j < keys.length; j++) {
            var text = props[keys[j]].toLowerCase().replace(/ /g, '');
            if (optionValue.indexOf(text) !== -1) {
               itemMatches = true;
               break;
            }
        }
        if (itemMatches) {
            out.push(item);
        }
        });
        } else {
            // Let the output be the input untouched
            out = items;
        }

        return out;
    };
})

可以对选项值作为一个整体进行搜索。例如，如果在选项中您有“peter parker”，那么您可以使用“peter”、“parker”、“peter parker”、“peterparker”进行搜索，甚至可以在 peter parker 的任何字符之间使用多个空格进行搜索。

关于javascript - Angular ui-select 只过滤一个字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27103867/