Angular ui-select只过滤一个字段

Question

情况:

我有一个角度应用程序使用角度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, 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>

奇怪的是它实际上只适用于第一个角色.当我键入第一个字符时,它会在两个字段,名称和电子邮件中突出显示它.但是当我键入第二个字符时它不再起作用(我在控制台中没有错误).

ATTEMP使用来自角粒样品的 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

问题(S):

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

非常感谢你!

Answer 1

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

 <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的任何角色之间搜索多个空格.

Answer 2

也许是因为相同的值($ select.search)用于过滤器电子邮件和名称.

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

这也将解释为什么它只适用于第一个角色.

为每个过滤器使用单独的值来解决此问题:

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