Блог

У меня есть angular uib-typeahead. Вот ссылка на plunkr, которую я создал.https: //plnkr.co/edit/8XwhSXsZlyd0oKSljS9t?p=предварительный просмотр.

Я использовал свойство typeahead-is-open .

Я хочу, чтобы при нажатии на uib-typeahead он открывался и отображал все значения. Я предполагаю, что установка значения typeahead-is-open в true выполняет эту работу. Правильно ли это? В настоящее время typeahead не открывается при установке значения typeahead-is-open в значение true.

Вот мой html

 <input ng-click = "myFunc()" click-outside="typeaheadIsOpen = false;" type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" typeahead-is-open="typeaheadIsOpen" class="form-control">
  

Мой JS

 $scope.myFunc = function() {
   $timeout(function() {
       $scope.typeaheadIsOpen = true;
       $scope.$digest();
   })
}
  

Я привязал typeahead-is-open к переменной «typeaheadIsOpen». При нажатии на typeahead я вызываю myFuc(), который устанавливает для переменной typeaheadIsOpen значение true .

Но typeahead не открывается. Я что-то делаю не так?

Кажется, вы не можете контролировать, отображается ли всплывающее окно typeahead или нет, используя typeahead-is-open атрибут. Вот соответствующая часть из исходного кода:

UibTypeaheadController

 //binding to a variable that indicates if dropdown is open
var isOpenSetter = $parse(attrs.typeaheadIsOpen).assign || angular.noop;
...
scope.assignIsOpen = function (isOpen) {
    isOpenSetter(originalScope, isOpen);
};
  

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

К сожалению, я все еще использую angularjs в 2021 году. В итоге я нашел хак, основанный на этих потоках

https://github.com/angular-ui/bootstrap/issues/6619
https://github.com/angular-ui/bootstrap/issues/759

Учитывая ввод typeahead

 <input class="form-control address_input" 
       type="text"
       typeahead-editable="true"
       typeahead-on-select=...
  

В контроллере в angular, который обрабатывает это, я создал функцию, подобную этой

 function _forceDropdownOpen() {
    const controller = $(".address_input").controller('ngModel');
    const old = controller.$viewValue;
    controller.$setViewValue(old  ' ');
    controller.$setViewValue(old);
}
  

Это просто имитирует добавление пробела к результату, а затем удаление этого пробела.

Вот пример моего приложения до и после. Мой вариант использования был после ввода третьей буквы, мой код отправляет HTTP-запрос. Когда этот запрос возвращается, и если у него есть результаты, я вызываю этот метод, чтобы открыть выпадающий список.

Before: выпадающий список не открывается, пока не будет введена четвертая буква

После: открывается сразу по результатам