2

I am filtering the dropdown menu by typing in the box, and capturing the key into my model. It is working fine! However, the problem is as I type, the selection is not being narrowed down. where is the problem?

capturing the key but not live search anymore!

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

however, here is selection is being narrowed down, but the model is capturing both key and value, which i don't want.

live search OK but capturing both key and value

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

my data structure is like:

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

Final goal is:

the final goal is to have live search and pass the key, for example, "continent1" to the ng-change="continentSelect()".

cplus
  • 1,115
  • 4
  • 22
  • 55

1 Answers1

3

replace your second code with the following, simply adding .key:

<ui-select-choices repeat="r.key as r in data.continent.list | filter: $select.search">
Marcel
  • 2,764
  • 1
  • 24
  • 40