我有一个简单的货币列表typeahead。当我开始输入并选择所需的值(或按下TAB键),所选的值被选中 - 在这一点上,一切都按预期工作。
然而,如果我输入整个单词并在选择值之外单击输入框(onblur事件),即使我的输入框中的值与过滤器值匹配,selected作用域变量也不会更新,因此我的输入框无效。我想做的是在onblur事件期间覆盖所选值。
例如:如果我输入EUR,而没有按TAB或从typeahead下拉菜单中选择EUR值,然后单击输入框之外,EUR文本仍然停留在输入框中,但所选值为undefined。我希望所选的值保持EUR而不是undefined。我使用了$viewValue来在onblur事件期间发送输入值。
HTML代码:
在下面的JsFiddle中,您可以看到相同的场景,只是它显示的是美国各州而非货币。试着输入 Alabama 然后 左键单击输入框之外的区域 (不要按TAB键,也不要选择该州),您会发现所选范围变量仍为空。
JsFiddle链接在这里。
然而,如果我输入整个单词并在选择值之外单击输入框(onblur事件),即使我的输入框中的值与过滤器值匹配,selected作用域变量也不会更新,因此我的输入框无效。我想做的是在onblur事件期间覆盖所选值。
例如:如果我输入EUR,而没有按TAB或从typeahead下拉菜单中选择EUR值,然后单击输入框之外,EUR文本仍然停留在输入框中,但所选值为undefined。我希望所选的值保持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>
JavaScript:
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链接在这里。