Объединить Uib-typeahead + выпадающий список [Bootstrap 4]

Question

Объединить Uib-typeahead + выпадающий список [Bootstrap 4]

<div class="input-group">
<input type="text" class="form-control" ng-model="vm.selectedUser"
       uib-typeahead="user as user.fullname for user in vm.users | filter:$viewValue"
       typeahead-on-select='vm.onSelectUser($item, $model, $label)'
       typeahead-editable="false"/>
<div class='dropdown input-group-append'>
    <button class='btn btn-secondary dropdown-toggle' type="button" id="dropdownMenuButton" data-toggle="dropdown">
        <span class='caret'></span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <div ng-repeat='user in vm.users'>
            <a class="dropdown-item" href ng-click='vm.onSelectUser(user)'>{{user.fullname}}</a>
        </div>
    </div>
</div>

В настоящее время я получаю как ниже

Мне нужен только один выпадающий список, когда я пытался выбрать / напечатать.

Заранее спасибо.

Answer 1

Вам не нужно повторять ng внутри выпадающего меню, так как urb-typeahead уже будет вызывать метод vm.onSelectUser.

Если вы хотите, чтобы при раскрытии был активирован раскрывающийся списокна стрелке справа вы можете изменить класс выпадающего элемента с помощью Angular или jQuery и сделать его видимым.Элемент раскрывающегося списка будет выглядеть примерно так:

<ul class="dropdown-menu ng-isolate-scope" ng-show="isOpen() && !moveInProgress" ng-style="{top: position().top+'px', left: position().left+'px'}" role="listbox" aria-hidden="false" uib-typeahead-popup="" id="typeahead-83-4479" matches="matches" active="activeIdx" select="select(activeIdx, evt)" move-in-progress="moveInProgress" query="query" position="position" assign-is-open="assignIsOpen(isOpen)" debounce="debounceUpdate" template-url="customTemplate.html" style="top: 34px; left: 0px;">

(это взято из примера uib-typeahead на github)