提前輸入Angular UI-防止下拉菜單在選擇時關閉

Question

我希望能夠在選擇后顯示整個列表。 我要這樣做的方法是將所選內容放在占位符中，然后清除輸入的模型。

在選擇提前輸入事件中，我保存了所選的值，並將模型設置為“”。 我希望下拉列表看起來像輸入為空時一樣，但事實並非如此。

<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)">

當我清除輸入的模型時，typeahead不會檢測到模型中的更改。 如果再輸入1個字符並將其刪除，則會得到整個列表。

角度v1.2.9

Angular Bootstrap v0.10.0

任何幫助，即使是不同的方法，也將不勝感激。

編輯：如何防止選擇后關閉下拉列表或使typeahead檢測到我的模型中的更改？

Answer 1

我做類似的事情。 我在預輸入的右側添加了一個按鈕，使其看起來像一個下拉菜單，單擊該按鈕將顯示預輸入選項。 您可以做與我用來實現它一樣的按鈕單擊。 您必須根據需要修改以下代碼。 這來自我的指令

       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);
        } ;

Answer 2

我可以解決這個問題，只需添加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);