【问题标题】:Angular UI-Bootstrap Typeahead: Accept top item as selected on ENTERAngular UI-Bootstrap Typeahead:接受在 ENTER 上选择的顶部项目
【发布时间】:2017-04-28 04:33:10
【问题描述】:

简单的问题,但是当按下 ENTER 时,有没有办法让下拉结果中的第一个项目成为选定项目?

这方面的一个例子是用户键入“PC0”并看到“PC001”列为第一个选项,我们可以让它在按下 ENTER 时在 typeahead-on-select 选项上使用“PC001”吗?

我目前正在使用typeahead-on-select 运行一个函数,该函数通过 id 调用输入并获取在函数中使用的值。它似乎使用输入到文本框中的内容而不是选定的值,无论是在 ENTER 或 Click 上。

HTML:

<input id="applicationComboBox"
       type="text"
       ng-model="applicationComboBox"
       uib-typeahead="a as a.Value for a in applicationList | filter:$viewValue"
       typeahead-on-select="getApplication()"
       class="form-control">

getApplicationValue() 的 JS 看起来像这样:

$scope.getApplication = function () {
    $scope.ApplicationValue = applicationComboBox.value; 
}

问题是 applicationComboBox.value 是用户在单击/输入时输入到输入中的文本,而不是分别单击/突出显示的值。因此,在前面的示例中,“PC0”将是值而不是“PC001”。

【问题讨论】:

  • 请向我们展示您为此使用的代码。
  • 我已经编辑了我的问题以显示一个模仿我正在使用的代码的简单示例。

标签: javascript html angularjs angular-ui-bootstrap angular-ui-typeahead


【解决方案1】:

当用户选择/按下回车时,ng-model applicationCombox 会自动更新。如果您希望在选择后更新另一个值 $scope.ApplicationValue,请执行以下操作

$scope.applicationCombox = ""; //your existing model.
$scope.getApplication = function () {
 $scope.ApplicationValue = $scope.applicationCombox; 
}

让我们知道。

【讨论】:

  • 我不认为这正是我想要的。我正在寻找一种方法来获取所选值,而不是在 typeahead-on-select 或类似调用中输入到选择框中的内容。我已经尝试了 applicationComboBox 调用和 document.getElementById('applicationComboBox') 来尝试获取更新的值,它们都返回了预选的值。
  • 你能检查一下这个 plunker 并告诉我它是否与你的问题很接近吗? plnkr.co/edit/TlTmRNSlzMz1hWNuPXV5?p=preview 。你似乎已经正确设置了一切,除了用法。 @奥斯汀
  • 很抱歉没有更新,但我找到了适合我的解决方案。我会发布它作为对问题的回应
【解决方案2】:

我能够找到适合我的解决方案。

HTML:

<input id="applicationComboBox"
   type="text"
   ng-model="applicationComboBox"
   uib-typeahead="a as a.Value for a in applicationList | filter:$viewValue"
   typeahead-on-select="onApplicationSelect($item, $model, $label, a)"
   class="form-control">

JS:

$scope.onApplicationSelect = function (item, model, label, application) {
        applicationComboBox.value= item.Value;
    }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多