angularjs - framework - ng-bootstrap angular 6

Cómo borrar el texto de la entrada typeahead de AngularUI

Question

Tengo una entrada typeahead. El texto de entrada se establece en la opción seleccionada en el typeahead. Sin embargo, quiero borrar este texto y mostrar el valor del "marcador de posición" nuevamente en el cuadro de texto después de seleccionar una de las opciones de typeahead (porque agrego el valor seleccionado a otro div en el método 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">

Intenté establecer el valor de texto y el valor de marcador de posición del elemento de entrada utilizando su Id, pero eso no funcionó, como estos:

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

resultado seleccionado

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

¿Cómo puedo configurar o restablecer el valor del texto?

Answer 1

En realidad este problema no es de typeahead. Es un problema común sobre ng-model, scope and dot notation .

Consulte la herencia de alcance en Angular

En su situación, simplemente cambia el nombre del modelo como xx.selected with dot-notation y establezca xx.selected vacío en typeahead-on-select callback.

Answer 2

Para establecer o restablecer el valor, ¿no accedería al valor del modelo ng, que es asyncSelected de acuerdo con su código? En un controlador:

$scope.asyncSelected = '''';

Answer 3

Yo también estaba buscando una respuesta a esto, durante más tiempo. Finalmente encontré una resolución que funcionó para mí.

Terminé configurando el NgModel en una cadena vacía dentro del typeahead-on-select :

En su typeahead-on-select agregue asyncSelected = ''''; Detrás de su función de selección, así:

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

Haciendo que tu typeahead final parezca algo como:

<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 añadiendo cada selección a una matriz.

Answer 4

La respuesta de @Asok está bien si necesita borrar el valor de inmediato, pero para mí, y tal vez para otros que vienen aquí según el título de la pregunta, la respuesta de @hey puede ser mejor (aunque breve).

Cambié el typeahead de la siguiente manera:

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

Entonces, cuando necesito borrar la entrada de mi controlador, puedo llamar

$scope.myNewVar.asyncSelected = '''';