How to remove duplicate options from angular ui select?

Question

Here is my angular ui select html:

<ui-select title="Select Template Directory" ng-change="searchTemplate()" theme="select2" ng-model="search_data.sub_directory" id="search_sub_directory" name="search_sub_directory" class="search_panel">
    <ui-select-match allow-clear="true" placeholder="Select Template Directory">{{$select.selected.subDirectory}}</ui-select-match>
    <ui-select-choices repeat="template.subDirectory as template in response_template_directories | filter: $select.search">
        <span ng-bind-html="template.subDirectory | highlight: $select.search"></span>
    </ui-select-choices>
</ui-select>

and here is response_template_directories

[
{subDirectory : 1},
{subDirectory : 1},
{subDirectory : 1},
{subDirectory : 1},
{subDirectory : 1},
{subDirectory : 1},
{subDirectory : 2},
{subDirectory : 3},
]

Select list also showing duplicates

How can i remove these duplicates in ui select html?

you can implement a custom filer or filter your `response_template_directories` array in your controller — Naigel, Nov 10 '16 at 13:55
Possible duplicate - http://stackoverflow.com/questions/15914658/how-to-make-ng-repeat-filter-out-duplicate-results — Stoyan Berov, Nov 10 '16 at 13:57
I forgot that angularUi implement a unique filter, it saves you (and all of us :) some work. Many thank to @Matheus — Naigel, Nov 10 '16 at 14:00

Matheus · Accepted Answer · 2016-11-10T14:14:34.220

Use filter unique (implement from AngularUI or import a8m/angular-filter).

<ui-select title="Select Template Directory" ng-change="searchTemplate()" theme="select2" ng-model="search_data.sub_directory" id="search_sub_directory" name="search_sub_directory" class="search_panel">
<ui-select-match allow-clear="true" placeholder="Select Template Directory">{{$select.selected.subDirectory}}</ui-select-match>
<ui-select-choices repeat="template.subDirectory as template in response_template_directories | unique: 'subDirectory' | filter: $select.search">
    <span ng-bind-html="template.subDirectory | highlight: $select.search"></span>
</ui-select-choices>

Or write your own filter with lodash:

app.filter('unique', function() {
    return function (arr, field) {
        return _.uniq(arr, function(a) { return a[field]; });
    };
});

it's giving error: https://docs.angularjs.org/error/$injector/unpr?p0=uniqueFilterProvider%20%3C-%20uniqueFilter — Sony Khan, Nov 10 '16 at 14:03
You must to implement this filter (https://github.com/angular-ui/angular-ui/blob/master/modules/filters/unique/unique.js) on your application or do this with lodash. — Matheus, Nov 10 '16 at 14:09

How to remove duplicate options from angular ui select?

1 Answers1