AngularJS中ui-select角色筛选失效问题求助

问题回顾 #

开发AngularJS应用时，使用ui-select组件实现角色和标签的多选功能，标签筛选正常，但角色筛选无法生效——两者数据均从后端获取，且数据结构一致。

角色相关代码（存在筛选问题） #

<div class="form-group">
<label>{{'CONFIG_DEPARTMENTS_ADDDEPARTMENT_ROLE' | translate}}</label>
<ui-select multiple ng-model="model.Roles" theme="bootstrap" uib-tooltip="{{'TOOLTIP_GLOBAL_ADD_ROLE' | translate}}" uis-open-close="getDepartmentRoles()">
    <ui-select-match placeholder="{{'CONFIG_DEPARTMENTS_ADDDEPARTMENT_SEARCHROLE' | translate}}">{{$item.Title}}</ui-select-match>
    <ui-select-choices repeat="role in roles | filter: $select.search">
        <div>{{role.Title}}</div>
    </ui-select-choices>
</ui-select>
<div ng-if="model.Errors.Roles">
    {{model.Errors.Roles}}
</div>

可正常工作的标签代码 #

<div class="form-group">
<label>{{'CONFIG_DEPARTMENTS_ADDDEPARTMENT_TABS' | translate}}</label>
<ui-select multiple ng-model="model.Tabs" theme="bootstrap" uib-tooltip="{{'TOOLTIP_GLOBAL_ADD_TAB' | translate}}" uis-open-close="getDepartmentTabs()">
    <ui-select-match placeholder="{{'CONFIG_DEPARTMENTS_ADDDEPARTMENT_SEARCHTABS' | translate}}">{{$item.Title}}</ui-select-match>
    <ui-select-choices repeat="tab in tabs | filter: $select.search">
        <div>{{tab.Title}}</div>
    </ui-select-choices>
</ui-select>
<div ng-if="model.Errors.Tabs">
    {{model.Errors.Tabs}}
</div>

解决思路及方案 #

1. 明确指定筛选字段

默认filter会遍历对象所有字段匹配，若角色对象包含ID、描述等干扰字段，可能导致匹配逻辑异常。可明确指定仅筛选Title字段：

<ui-select-choices repeat="role in roles | filter: {Title: $select.search}">

2. 使用自定义筛选函数（支持大小写忽略等规则）

在控制器中定义自定义筛选逻辑：

$scope.filterRoles = function(role) {
  if (!$select.search) return true;
  const searchText = $select.search.toLowerCase();
  return role.Title?.toLowerCase().includes(searchText);
}

模板中引用该函数：

<ui-select-choices repeat="role in roles | filter: filterRoles">

3. 检查数据加载逻辑

uis-open-close="getDepartmentRoles()"会在下拉开关时触发数据获取，需确保getDepartmentRoles()正确赋值roles数组，无异步延迟或数据覆盖问题。可在控制台打印roles，确认每个对象的Title字段为有效字符串。

4. 兼容版本特性

使用的ui-select版本为0.19.7，可尝试在ui-select-choices中添加refresh属性确保数据更新时重新渲染选项：

<ui-select-choices repeat="role in roles | filter: $select.search" refresh="roles">

内容的提问来源于stack exchange，提问作者Kristijan Nikoloski