角度 UI 预测文本:如何输入未包含在输入数组中的数据

Angular UI Predictive Text: How to Enter Data not Included in Input Array

本文关键字:输入 包含 数组 数据 UI 文本 何输入 角度      更新时间:2023-09-26

我正在尝试使用 Angular UI 的预键入功能来填充列表。我的问题是我希望它不要将输入中接受的内容限制为仅提供数组中的那些字符串。typeahead-editable选项似乎可以工作,但是当我将其作为输入中的属性时,它似乎不起作用。也许这不是它的用途?

(默认值:true) - 是否应将模型值限制为仅从弹出窗口中选择的值?

不太清楚"弹出窗口"是什么,所以也许它不是我最初认为的输入模型。

我可以通过捕获每个按键下拉列表中的值并将其保存到每个按键事件(输入除外)的$scope来解决此问题

$scope.freeText = angular.element('#myinput').val();

然后当输入保存值到#myinputng-model值,并清除输入

$scope.selected = $scope.freeText = '';

但问题是完整的自动完成文本在输入中闪烁半秒钟。如何使用此预测搜索,以便用户可以输入他或她想要的任何内容,并且仅在需要时采用建议的值?

这正是此属性的用途

工作普伦克 http://plnkr.co/edit/85SmgdvnSKWfda6QNNQZ?p=preview

<h4>Limited - model not set unless input matches available options</h4>
    <pre>Model: {{selected | json}}</pre>
    <input type="text" 
    ng-model="selected" 
    typeahead-show-hint="true" 
    typeahead-focus-first="false"
    typeahead-editable="false" 
    uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
<h4>Not limited - model set as soon as you start typing</h4>
    <pre>Model: {{selected2 | json}}</pre>
    <input type="text" ng-model="selected2" 
    typeahead-show-hint="true" 
    typeahead-editable="true" 
    uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">

当该选项设置为 true 时,模型将立即设置,无论您键入什么,如果禁用模型,不仅不会设置,而且输入字段模糊时

输入将被清除

如果这对您不起作用,那么问题很可能出在其他地方,如果没有真正的代码,就很难回答