Question

我有一个有角度的uib-typeahead。这是我创建的plunkr的链接。https://plnkr.co/edit/8XwhSXsZlyd0oKSljS9t?p=preview。

我使用过typeahead-is-open属性。

我想要的是当我点击uib-typeahead时它应该打开并显示所有值。我假设将typeahead-is-open设置为true来完成这项工作。它是否正确？目前，在将typeahead-is-open设置为true时，typeahead不会打开。

这是我的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。

但是预先打开了。有什么我做错了吗？

Answer 1

您似乎无法使用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打开时更新范围的表达式，但不用于从范围获取值并且未设置相关的观察程序。

Answer 2

遗憾的是，我在 2021 年仍在使用 angularjs。我最终找到了基于这些线程的 hack

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

给定一个提前输入

<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 请求。当该请求返回时，如果有结果，我会调用此方法打开下拉列表。

之前：在输入第四个字母之前不会打开下拉菜单

之后：立即打开结果

Angular uib typeahead，typeahead-open-open not working

2 个答案: