角度 UI 类型提前 - 防止在选择时关闭下拉列表

Angular UI Typeahead - Prevent dropdown close on select

本文关键字：选择 下拉列表 类型 UI 角度      更新时间：2023-09-26

我希望能够在选择后显示整个列表。我想这样做的方法是将选择放在占位符中并清除输入的模型。

在提前选择事件中，我保存了选定的值，并将模型设置为 "。我希望下拉列表看起来就像输入为空一样，但事实并非如此。

<input type="text" ng-model="myModel" data-min-length="0"
  typeahead="item for item in items | filter:$viewValue"
  placeholder="{{currentModel}}" 
  ng-blur="validateSelection()" 
  typeahead-on-select="onSelect($item, $model, $label)">

当我清除输入的模型时，预先键入不会检测到模型中的更改。如果我然后键入 1 个字符并擦除它，我会得到整个列表。

角度 v1.2.9

角度引导 v0.10.0

任何帮助将不胜感激，即使是不同的方法。

编辑：如何防止在选择后关闭下拉列表或使预先键入检测模型中的更改？

我做了类似的事情。我在预排输入的右侧添加一个按钮，使其看起来像一个下拉菜单，单击该按钮将显示预键入选项。 您可以执行相当于我用来实现它的按钮单击。您必须根据需要修改以下代码。这来自我做出的指令

       var which = 'idOfTypehead'; // This is actually a variable, I just set it here
                                   // it is the id="XXX" from my typeahead
       $("#"+which).focus();
       var e = jQuery.Event('keydown', {which: 40 });
            $timeout(function() {
                $("#"+which).trigger(e);
            },0);
        } ;

我只需添加一个 ng-click 函数来停止传播到模态内容即可解决此问题。通过这种方式 ng-click="dropdownMenuClick（$event）"。

<header class="top-header clearfix" data-ng-controller="headerController">
    <!--modal search panel-->
    <li class="dropdown top-bar-item search-panel" ng-show="searchCallback">
        <a href="javascript:;" class="dropdown-toggle" toggle="dropdown">
            <i class="glyphicon glyphicon-search"></i>
            <span>Search modal panel</span>
        </a>
        <div class="dropdown-menu with-arrow panel panel-dark" style="width: 330px;">
            <div class="panel-heading">
                <i class="glyphicon glyphicon-search"></i> <span>{{currentSearchTitle}}</span>
            </div>
            <div ng-click="dropdownMenuClick($event)">
                <div class="panel-body">
                    <div class="row">
                        <input type="text"
                               placeholder="Type your word"
                               ng-model="result"
                               typeahead="item as item.Name for item in buildings($viewValue)"
                               typeahead-on-select='onSelect($item, $model, $label)'
                               class="form-control">
                    </div>
                </div>
            </div>
            <div class="panel-footer text-right">
                <a href="javascript:;" class="" toggle="dropdown" ng-click="searchCallback(seachFilter)">
                    <i class="glyphicon glyphicon-search"></i>
                    <span>Search</span>
                </a>
            </div>
        </div>
    </li>
    <!--modal search panel-->
</header>

在控制器中：

(function () {
    'use strict';
    angular.module('app')
    .controller('headerController', [
      '$scope', '$http', '$routeParams', 'logger', '$modal', 'appConfig',
      function ($scope, $http, $routeParams, logger, $modal, appConfig) {
          $scope.dropdownMenuClick = function ($event) {
              $event.preventDefault()
          };
      }
    ]);
}).call(this);
相关文章：