Question

对于货币列表，我有一个简单的 typeahead 。当我开始输入并选择所需的值（或点击TAB）时，会选择所需的值 - 直到这一点，一切都按预期工作。

然而，如果我输入整个单词并在输入外单击而不是选择值（onblur事件），那么即使输入中的值与过滤器值匹配，选定的范围变量不会更新，因此我的输入无效。我试图做的是在onblur事件期间覆盖选定的值。

示例：如果我键入 EUR 而未点击TAB或从输入前进下拉列表中选择 EUR 值，然后在输入外单击 EUR 文本保留在输入内部，但所选值为未定义。我希望所选值保持EUR而不是undefined。我使用 $ viewValue 在onblur事件期间发送输入值。

HTML：

<input type="text" ng-model="selected" typeahead-editable="false" typeahead="currency for currency in currencies | filter:$viewValue" ng-blur="selectCurrency($viewValue)" />
<div>Selected: {{selected}}</div>

JavaScipt：

angular.module('myApp', ['ui.bootstrap'])
.controller("mainCtrl", function ($scope) {
    $scope.selected = '';
    $scope.currencies = ['EUR', 'GBP', 'USD'];
    $scope.selectCurrency = function(test) {
        console.log(test); //outputs undefined instead of EUR
        //if (checkIfCurrencyExists(test, $scope.currencies)) { - will do the checks later
        $scope.selected = test;
        //}
    };
});

在下面的JsFiddle中，您可以看到相同的情况，除了它有美国州而不是货币。尝试输入 Alabama 然后在输入外左键单击（不要选择TAB并且不要选择状态），您会看到所选范围变量保持空白

JsFiddle链接here。

Answer 1

找到另一种解决方案 - 将typeahead-select-on-exact和typeahead-select-on-blur属性设置为true：

＆＃13;

   <input typeahead-select-on-exact="true" typeahead-select-on-blur="true" uib-typeahead=...

＆＃13;

Typeahead-select-on-exact使得精确匹配的项目在列表中自动突出显示，而typeahead-select-on-blur使得在模糊时选择了突出显示的项目。

Answer 2

我花了一些时间来寻找类似的问题，并做了很多测试，直到我使它起作用。我可以在答案中看到有解决方案，但我尝试对其进行总结，以便更加清楚。

在预输入部分中包括：

<input type="text" ng-model="selected" typeahead-editable="false" typeahead="currency for currency in currencies | filter:$viewValue" ng-blur="checkSelectedValue()" typeahead-select-on-blur="true" />

第一部分包括您的范围值的验证功能（您不必传递该值，因为它是$ scope.selected，您可以在控制器中使用它）：ng-blur =“ checkSelectedValue（）”。因此，将其包含在您的控制器中：

$scope.checkSelectedValue = function() {
  if (code that check if $scope.selected in range of allowed values) { 
    $scope.inputValid=true; //you can use this scope or write code that run when selected a correct value
  } else {
    $scope.inputValid=false; 
}};

第二部分：typeahead-select-on-blur =“ true” //这是必要的，因为它首先会使$ scope.selected = selected值从下拉列表中选择（完整的单词），但也有点怪异，但重要的是要知道在typeahead选择了您的值之后，它将最后运行ng-blur =“ checkSelectedValue（）”指令，因此它将始终检查验证并根据$ scope.selected值设置$ scope.inputValid = true或false。

Answer 3

如果您想在模糊中选择预先输入列表中的第一个结果，则可以在doc中的typeahead-select-on-blur="true"字段中设置input。

typeahead-select-on-blur（默认：false ） - 在模糊时，选择目前突出显示匹配。

Answer 4

当时我自己找到了答案，但忘记在这里回答我的问题了。

将此添加到指令中：

data-ng-blur="blur($event)"

这就是功能：

$scope.blur = function(e) {
            var inputCurrency = e.target.value.toUpperCase();
            angular.forEach($scope.currencies, function(currency) {
                if (currency === inputCurrency) {
                    $scope.field = currency;
                }
            });
        };

使用typeahead时，在onblur事件期间选择值

4 个答案: