时间戳

首页 > 解决方案 > 结合 uib-typeahead + 下拉菜单[Bootstrap 4]

angularjs - 结合 uib-typeahead + 下拉菜单[Bootstrap 4]

问题描述

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

目前，我变得像下面

示例图片在这里

当我尝试选择/提前输入时，我只需要一个下拉菜单。

提前致谢。

标签： angularjsbootstrap-4angular-ui-bootstrap

解决方案

您不需要下拉菜单中的 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 示例）

推荐阅读