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>

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

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

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

angularjs ui-select 仅捕获键而不是下拉实时搜索中的值

angularjs ui-select to capture the key only not the value in dropdown live search

angularjs

angularjs-ng-repeat

ui-select

angular-ui-select

最终目标是：