Как очистить текст от ввода заголовка AngularUI

У меня есть ввод типа. На входном тексте задается опция, выбранная для типа head. Однако я хочу очистить этот текст и снова отобразить значение "placeholder" в текстовом поле после того, как я выберу одну из опций из typeahead (потому что я добавляю выбранное значение к другому div в методе selectMatch().

<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">

Я попытался установить текстовое значение и значение placeholder элемента Input, используя его Id, но это не сработало, например:

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

выбранный результат

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

Как установить или reset текстовое значение?

Ответ 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 добавляет каждый выбор в массив

Ответ 2

На самом деле эта проблема не связана с typeahead. Это распространенная проблема о ng-model, scope and dot notation.

См Наследование областей в Angular

В вашей ситуации вы просто меняете название модели как xx.selected с точечной нотацией и устанавливаете xx.selected empty в обратном вызове typeahead-on-select.

Ответ 3

Чтобы установить или reset значение, не могли бы вы получить доступ к значению ng-model, которое asyncSelected в соответствии с вашим кодом? В контроллере:

$scope.asyncSelected = '';

Ответ 4

@Asok answer отлично, если вам нужно немедленно очистить значение, но для себя и, возможно, других, которые приходят сюда на основе названия вопроса, @эй ответ может быть лучше (если он краток).

Я изменил typeahead следующим образом:

<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 = '';