结合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-repeat，因为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;">

（这取自github上的uib-typeahead示例）