使用AngularJS的下拉列表中的Bootstrap输入字段

发布时间：2020-12-17 07:18:43 所属栏目：安全来源：网络整理

导读：我有一个使用Bootstrap的下拉菜单,里面有一个输入字段.每次单击输入字段时,下拉菜单都会消失.我怎么能阻止它？顺便说一下,我正在使用AngularJS,所以jQuery方式可能不适合这里. div class="dropdown" button class="btn btn-default dropdown-toggle" type="

我有一个使用Bootstrap的下拉菜单,里面有一个输入字段.每次单击输入字段时,下拉菜单都会消失.我怎么能阻止它？

顺便说一下,我正在使用AngularJS,所以jQuery方式可能不适合这里.

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        <span class="pull-left">{{ trans('text.choose_user') }}</span> 
        <span class="pull-right"><i class="icon-order-table"></i></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li role="presentation" class="basic-padding"><a role="menuitem" tabindex="-1" href="#">{{ trans('text.guest') }}</a></li>
        <li class="basic-padding">
            <div class="input-group">
                <input type="search" class="form-control" placeholder="{{ trans('text.search') }}">
                <span class="input-group-btn">
                    <button class="btn btn-default">
                        <i class="icon-search"></i>
                    </button>
                </span>
            </div>
        </li>
    </ul>
</div>

感谢@Rob J,我想出了一个解决方案,不像他提到的那样：

<input type="search" class="form-control" placeholder="{{ trans('text.search') }}" ng-click="$event.stopPropagation()">

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!