如何从AngularUI预先输入中清除文本

Question

我有一个输入输入.输入文本设置为在预先输入上选择的选项.但是,我想清除此文本并在从typeahead中选择其中一个选项后再次在文本框中显示"占位符"值(因为我将所选值添加到selectMatch()方法中的另一个div .

<input id="searchTextBoxId" type="text" 
    ng-model="asyncSelected" placeholder="Search  addresses..."
    typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
    typeahead-loading="loadingLocations" class="form-control"
    typeahead-on-select="selectMatch(asyncSelected)" typeahead-min-length="3"
    typeahead-wait-ms="500">

我尝试使用其Id设置Input元素的文本值和占位符值,但这不起作用,例如:

// the input text was still the 
$('#searchTextBoxId').attr('placeholder', 'HELLO');

选定的结果

// the input text was still the selected result
$('#searchTextBoxId').val('');

如何设置或重置文本值？

Answer 1

我也在寻找答案,这是最长的时间.我终于找到了适合我的决议.

我结束了NgModel设置为空字符串中的typeahead-on-select属性:

在你的typeahead-on-select属性中添加asyncSelected = '';你的select函数,就像这样:

<input ...
    typeahead-on-select="selectMatch(asyncSelected); asyncSelected = '';" />

让你的最终预测类似于:

<input id="searchTextBoxId" type="text" 
    ng-model="asyncSelected" placeholder="Search  addresses..."
    typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
    typeahead-loading="loadingLocations" class="form-control"
    typeahead-on-select="selectMatch(asyncSelected); asyncSelected = '';" 
    typeahead-min-length="3"
    typeahead-wait-ms="500">

Fiddle adding each selection to an array

Answer 2

实际上这个问题不是来自typeahead.这是常见的问题ng-model, scope and dot notation.

在Angular中引用 范围继承

在您的情况下,您只需更改模型名称,如xx.selected使用点符号,并在typeahead-on-select回调中将xx.selected设置为空.