角度 UI 选择仅过滤一个字段

你可以像下面这样使用属性过滤器

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

您必须修改属性过滤器，如下所示：

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

可以对整个选项值进行搜索。例如，如果在选项中有"彼得帕克"，那么您可以使用"彼得"，"帕克"，"彼得帕克"，"彼得帕克"进行搜索，甚至可以在彼得帕克的任何角色之间搜索多个空格。

也许是因为过滤器电子邮件和姓名使用相同的值（$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}">
...

我看到一些像昆辛格的答案一样四处游荡，这让我开始解决我的类似问题。 就我而言，它是搜索多个对象和对象，但我也会将逻辑删除的记录发送到客户端，并选择性地在列表中过滤它们。 对于下拉菜单，我希望始终将其删除而无需更改API。

这是我修改后的版本，其中包括搜索对象。 显然，这只有在所有表都有一个名为 Delete 的 int 列时才有效（对我来说是唯一键的一部分，并在删除时设置为标识值），并且您将其传递给客户端。

稍后，我计划进一步更改以允许递归搜索对象。

App.filter('dropdownFilter', function () {
    return function (items, props: Object, keyvalue?) {
    var out = [];
        if (angular.isArray(items)) {
            items.forEach(function (item) {
                var itemMatches = false;
                var canbreak = false;
                // Filter out logically deleted records
                if (item.Deleted != 0)
                    itemMatches = false;
                else {
                    var keys = Object.keys(props);
                    for (var i = 0; i < keys.length; i++) {
                        var prop: string = keys[i];
                        var text = "";
                        // If an object, e.g. searching deep, such as Project: {ProjectName: $select.search}
                        // Then iterate through the object to find values.  
                        // NOTE: This one searches one deep from each object,
                        // e.g. Project.ProjectName
                        //      Project.User.LastName WILL NOT WORK.
                        if (angular.isObject(props[prop])) {
                            angular.forEach(props[prop], function (value, key) {
                                text = value.toLowerCase();
                                if (item[prop][key].toLowerCase().indexOf(text) !== -1) {
                                    itemMatches = true;
                                    canbreak = true;
                                }
                            });
                            if (canbreak)
                                break;
                        }
                        // If it's a simple array, then woo!
                        else {
                            text = props[prop].toLowerCase();
                            if (item[prop] != undefined && item[prop].toString().toLowerCase().indexOf(text) !== -1) {
                                itemMatches = true;
                                break;
                            }
                        }
                    }
                }
                if (itemMatches) {
                    out.push(item);
                }
            });
        }
        else {
            // Let the output be the input untouched
            out = items;
        }
    return out;
    }
});

以及正在使用的示例（使用 select2 表示角度）。 这是州/国家/地区的下拉列表，国家/地区作为州的子对象。

<ui-select ng-model="personneladdress.StateID" theme="select2" class="select2">
    <ui-select-match placeholder="{{language.State}}">{{$select.selected.StateName}}</ui-select-match>
    <ui-select-choices repeat="item.StateID as item in State | dropdownFilter: {StateName: $select.search, Country: {CountryName: $select.search}}">
        <span ng-bind-html="item.StateName | highlight: $select.search"></span><br />
        <small>
            <span ng-bind-html="''+item.Country.CountryName | highlight: $select.search"></span>
        </small>
    </ui-select-choices>
</ui-select>

我通过使用这段代码解决了这个问题：

<ui-select-choices repeat="person2 in list_people | filter: $select.search" >

在 ui-select-match 中，我使用两个字段：

<ui-select-match placeholder="select One...">
   {{$item.field1}} - {{$item.field2}}
</ui-select-match>