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

Question

我有一个预先输入的输入。输入文本设置为在预先输入时选择的选项。但是，在我从预先输入的选项中选择一个选项后，我想清除此文本并在文本框中再次显示“占位符”值（因为我将所选值添加到 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 = '';，如下所示：

<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

实际上这个问题不是来自预输入。这是ng-model, scope and dot notation 的常见问题。

参考 Scope inheritance in Angular

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

Answer 3

要设置或重置该值，您不会访问根据您的代码 asyncSelected 的 ng-model 值吗？在控制器中：

$scope.asyncSelected = '';

Answer 4

@Asok's answer 如果您需要立即清除值很好，但对于我自己，也许还有其他根据问题标题来到这里的人，@hey's answer 可能会更好（如果简洁的话）。

我将预输入更改如下：

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

然后，每当我需要清除控制器的输入时，我都可以调用

$scope.myNewVar.asyncSelected = '';

Answer 5

我已经按照jnthnjns's answer 的建议进行操作，并将 ng-model 的值设置为空字符串，但是选择弹出窗口并没有消失，因为我（故意）使用了 typeahead-min-length="0"，以便用户可以轻松看到选择.

直到我注意到按回车键进行选择实际上解除了该框，并且仅在单击时该框仍然存在。挖掘我看到的 ui-typeahead 代码

// return focus to the input element if a match was selected via a mouse click event
// use timeout to avoid $rootScope:inprog error
if (scope.$eval(attrs.typeaheadFocusOnSelect) !== false) {
   $timeout(function() { element[0].focus(); }, 0, false);
}

只要我设置了typeahead-focus-on-select="false"，框就会在选择（并清除模型）后立即消失。现在看起来很明显，但我以前见过这个选项，但把它读作自动选择焦点（或类似的东西）。将此作为答案，以防万一它对其他人有所帮助。