Как очистить текст от ввода AngularUI с опережением ввода

У меня есть ввод типа. Вводимый текст устанавливается в соответствии с параметром, выбранным в шапке. Однако я хочу очистить этот текст и снова отобразить значение «заполнитель» в текстовом поле после того, как я выберу один из параметров из 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">

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

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

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

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

Как я могу установить или сбросить текстовое значение?


angularjs angular-ui-bootstrap angular-ui angular-ui-typeahead
person S S    schedule 28.02.2014    source источник
comment
Хотел что-то подобное, спустя 3 года после тебя :D   -  person 32teeths    schedule 25.03.2017

Ответы (5)


arrow_upward
51
arrow_downward

Я тоже долго искал ответ на этот вопрос. Наконец-то я нашел решение, которое сработало для меня.

В итоге я установил для 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">

Скрипт, добавляющий каждый выбор в массив

person jnthnjns    schedule 23.04.2014
comment
Это интересно. Я шел по пути очистки его в функции выбора, а затем вызывал $apply для обновления. Это намного элегантнее. Я всегда чувствую себя неловко, вызывая применение или дайджест - person Abhinav Gujjar; 19.06.2014
comment
Фу. Хреново это должно было работать так. Я смотрел на элемент даже. - person vbullinger; 29.08.2014
comment
Это хорошее решение, но я бы добавил туда value="{{selectedValue}}". Без него ввод стал бы пустым сразу после выбора (из-за asyncSelected = ''), это выглядело бы довольно странно - person John Doe; 05.02.2015
comment
@JohnDoe Суть вопроса заключалась в том, чтобы очистить ввод, в некоторых случаях это необходимо, это облегчает конечному пользователю быстрый поиск. Я лично столкнулся с этим, когда создавал приложение для своего работодателя, где он хотел быстро искать записи о сотрудниках. Таким образом, после каждого поиска я очищал ввод, а затем имел тег заголовка со связанным результатом. - person jnthnjns; 05.02.2015
comment
@Asok Хорошо, у меня был другой вариант использования, поэтому я не буду обновлять ваш ответ. - person John Doe; 05.02.2015
comment
@Asok Большое спасибо за этот ответ. Я попытался очистить значение внутри метода typeahead-on-select, но по какой-то странной причине это не сработало... - person Mackenzie Browne; 16.04.2015
comment
@jnthnjns Ваши ссылки на скрипку не работают. Не могли бы вы обновить их. - person Rohit Jindal; 24.11.2016
comment
@rohit Воссоздал скрипку. Извините за это и извините, что вернулся к вам так поздно - person jnthnjns; 04.04.2017

arrow_upward
9
arrow_downward

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

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

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

person hey    schedule 07.11.2014

arrow_upward
2
arrow_downward

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

$scope.asyncSelected = '';
person JeffryHouser    schedule 28.02.2014
comment
Спасибо Reboog711. Нет, это не сработало, так как текст не очищается от элемента ввода. - person S S; 03.03.2014

arrow_upward
0
arrow_downward

@Asok answer подходит, если вам нужно немедленно очистить значение, но для меня и, возможно, других, кто приходит сюда на основе заголовок вопроса, @hey 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 = '';
person Michael    schedule 06.07.2015

arrow_upward
0
arrow_downward

Я уже делал так, как предлагал jnthnjns answer, и устанавливал значение ng-model в пустую строку, но всплывающее окно выбора не было уходит, потому что я (намеренно) использовал typeahead-min-length="0", чтобы пользователи могли легко видеть варианты.

Так было до тех пор, пока я не заметил, что нажатие Enter, чтобы сделать выбор, фактически закрывает поле, и оно остается только при щелчках. Копаясь в коде 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", окно закрывается сразу после выбора (и очистки модели). Сейчас это кажется очевидным, но я видел эту опцию раньше, но читал ее как автоматический выбор фокуса (или что-то в этом роде). Ставлю это как ответ, на всякий случай, если это поможет кому-то другому.

person Danny    schedule 17.03.2020