Угловой пользовательский интерфейс Typeahead - запретить выпадающее меню закрыть по выбору

Question

Я хотел, чтобы вы могли показать весь список после выбора. То, как я хотел это сделать, - поместить выделение в местозаполнитель и очистить модель ввода.

В событии typeahead-on-select я сохраняю выбранное значение и устанавливаю модель как "". Я ожидал, что выпадающее меню появится так же, как если бы вход был пуст, но это не так.

<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

Угловая Bootstrap v0.10.0

Любая помощь будет оценена, даже другой подход.

EDIT: Как предотвратить закрытие выпадающего списка после выбора или сделать typeahead обнаружением изменения в моей модели?

Answer 1

Я делаю что-то подобное. Я добавляю кнопку справа от typeahead, поэтому она выглядит как раскрывающееся меню, и нажатие кнопки делает выбор типа headhead. Вы можете сделать эквивалент кнопки, которую я использую, чтобы это произошло. Вам нужно будет изменить приведенный ниже код в соответствии с вашими потребностями. Это происходит из директивы я сделал

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