如何从angular ui select中删除重复选项?

时间:2016-11-10 13:53:55

标签: angularjs angular-ui-select

这是我的角色ui选择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>

这里是response_template_directories

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

选择列表也显示重复

enter image description here

如何在ui select html中删除这些副本?

1 个答案:

答案 0 :(得分:2)

使用过滤器唯一(来自AngularUI或导入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>

或使用lodash编写自己的过滤器:

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