Angular ui-select 只过滤一个字段 [英] Angular ui-select filtering only one field

问题描述

情况:

我有一个 angular 应用程序，使用 angular ui-select 来搜索和选择人员一个数据库.

I have an angular app using angular ui-select to search and select people from a database.

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

It is working fine, except one thing. The user should be able to filter among the people using two criteria: name and email.

使用普通角度过滤器，我只能过滤其中之一.如果我尝试过滤这两个字段，它将不再起作用.

Using the normal angular filter I am able to filter only one of them. If I try to filter both fields, it does not work anymore.

一个领域的工作示例:

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

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

The strange thing is that it actually works BUT only for the first character. When I type the first character it highlights it in both fields, name and email. But when I type the second character it does not work anymore (I got no error in console).

尝试使用来自 角度样本的 PROPSFILTER:>

ATTEMP USING PROPSFILTER FROM ANGULAR SAMPLES:

 <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 中不再有数据，我在控制台中收到一些错误:

In this case it broke completely, there is no data anymore in the select2 and I get some errors in the console:

Cannot read property 'toString' of null

Cannot read property 'length' of undefined

问题:

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

How can I filter among mulitple fields? Can I do that using normal filter? Or I have to use a custom filter? But in this case, why is not working properly?

非常感谢！

推荐答案

可能是因为过滤器 email 和 name 使用了相同的值($select.search).

Maybe it's because the same value($select.search) is used for both filters email and name.

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

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

This will also explains, why it only works with the first character.

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

Use separate values for each filter to fix this:

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

这篇关于Angular ui-select 只过滤一个字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！