web-dev-qa-db-fra.com

Comment effacer le texte de l'entrée de la tête de frappe AngularUI

J'ai une entrée typeahead. Le texte saisi est défini sur l'option sélectionnée sur la tête de frappe. Cependant, je veux effacer ce texte et afficher à nouveau la valeur "espace réservé" dans la zone de texte après avoir sélectionné l'une des options de typeahead (car j'ajoute la valeur sélectionnée à un autre div dans la méthode 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">

J'ai essayé de définir la valeur du texte et la valeur de l'espace réservé de l'élément Input en utilisant son ID, mais cela n'a pas fonctionné, tels que ceux-ci:

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

résultat sélectionné

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

Comment puis-je définir ou réinitialiser la valeur du texte?

angularjsangular-uiangular-ui-bootstrapangular-ui-typeahead
32
S S

Je cherchais aussi une réponse à cela depuis longtemps. J'ai finalement trouvé une résolution qui fonctionnait pour moi.

J'ai fini par définir le NgModel sur une chaîne vide dans le typeahead-on-select attribut:

Dans ton typeahead-on-select attribut ajouter asyncSelected = ''; derrière votre fonction de sélection, comme ceci:

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

Rendre votre typographie finale ressemblant à quelque chose comme:

<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

50
jnthnjns

En fait, ce problème ne vient pas de typeahead. C'est un problème courant à propos de ng-model, scope and dot notation.

Voir héritage de portée en angulaire

Dans votre situation, vous modifiez simplement le nom du modèle comme xx.selected avec la notation par points et définissez xx.selected vide dans le rappel typeahead-on-select.

9
hey

Pour définir ou réinitialiser la valeur, n'accédez-vous pas à la valeur ng-model, qui est asyncSelected selon votre code? Dans un contrôleur:

$scope.asyncSelected = '';
2
JeffryHouser

@ la réponse d'Asok est très bien si vous devez effacer immédiatement la valeur, mais pour moi, et peut-être pour d'autres qui viennent ici en fonction du titre de la question, @ la réponse de hey peut être mieux (si laconique).

J'ai changé la typeahead comme suit:

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

puis, chaque fois que j'ai besoin d'effacer l'entrée de mon contrôleur, je peux appeler

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