Angularjs的ui-select只捕获键，而不是下拉实时搜索中的值

Question

我通过输入框过滤下拉菜单，并将键捕获到我的模型中。它工作得很好!然而，问题是当我输入时，选择并没有缩小。问题在哪里?

捕获键，但不再进行实时搜索!

<div class="form-group" >
    <label translate="data.continent">
        my continents
    </label>
    <ui-select ng-model="myModel.continent" ng-change="continentSelect()" theme="bootstrap">
        <ui-select-match placeholder="Select in the list...">
            {{$select.selected.value}}
        </ui-select-match>
        <ui-select-choices repeat="r.key as r in data.continent.list track by $index | filter: {'key': $select.search}">
            <div ng-bind-html="r.value | highlight: $select.search"></div>
        </ui-select-choices>
    </ui-select>
</div>

然而，这里的选择正在缩小，但模型正在捕获键和值，这是我不希望的。

实时搜索OK，但同时捕获键和值

<div class="form-group" >
    <label translate="data.continent">
        Continent
    </label>
    <ui-select ng-model="myModel.continent" ng-change="continentSelect()" theme="bootstrap">
        <ui-select-match placeholder="Select in the list...">
            {{$select.selected.value}}
        </ui-select-match>
        <ui-select-choices repeat="r in data.continent.list | filter: $select.search ">
            <div ng-bind-html="r.value | highlight: $select.search"></div>
        </ui-select-choices>
    </ui-select>
</div>

我的数据结构如下:

"list" : [
        {"key" : "continent1", "value" : "Americas"},
        {"key" : "continent2", "value" : "Europe"},
        {"key" : "continent3", "value" : "Africa"}]

最终目标是:

最终目标是进行实时搜索并传递键，例如，"continent1"到ng-change="continentSelect()"。

Answer 1

将第二个代码替换为以下代码，只需添加.key:

<ui-select-choices repeat="r.key as r in data.continent.list | filter: $select.search">