Search code examples
angularjsangularjs-directive

ui-select filtering only one field

I'm working on an AngularJS application and I'm using ui-select to allow users to select multiple roles and tabs. The filtering works perfectly for the tabs, but for some reason, it's not working for the roles, even though both are retrieved from the backend and have the same structure.

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

And here's the code for the tabs, which works fine:

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

For roles, I tried to filter using the following approach, but it didn't work:

filter: {name: $select.search.Title}

Also changed the attribute for one of the lists to make a dinstinct roleTitle, and just Title, did not work.

seen from: Angular ui-select filtering only one field, did not work

filter:

Solution

  • Check the data from the backend. If you are sending two requests, one to get the model.Roles and another for the roles, there might be differences in the data. The objects will be filtered only if the object from model.Roles is identical to the role object from roles.