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的常见问题。

参考 Scope inheritance in Angular

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

Answer 3

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

$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"，该框就会在选择（并清除模型）后立即关闭。现在看来似乎很明显，但是我以前看过该选项，但是读过它就是自动选择焦点（或类似的东西）。以此为答案，以防万一对别人有帮助。

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

5 个答案: