angular ui-bootstrap typeahead callback on selectMatch ?

Question

J'utilise le typeahead angular ui-bootstrap et je voudrais l'utiliser comme un moyen de sélectionner plusieurs choix, donc j'aurais besoin de récupérer la valeur sélectionnée lorsque la méthode selectMatch est lancée, mais je ne trouve pas comment faire cela dans mon contrôleur.

<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{selected| json}}</pre>
<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue">

Si je regarde la valeur sélectionnée, j'ai obtenu le changement à chaque fois qu'une touche est pressée...

scope.$watch('selected', function(newValue, oldValue) {... });

J'ai compris que la méthode selectMatch est celle qui est appelée lorsque l'utilisateur appuie sur entrée ou clique sur la liste mais je ne sais pas comment avoir un callback sur cela....

Merci !

Answer 1

Il y a une meilleure façon de le faire maintenant. Une nouvelle méthode de rappel a été ajoutée

Dans le fichier du contrôleur, ajoutez ce qui suit :

 $scope.onSelect = function ($item, $model, $label) {
    $scope.$item = $item;
    $scope.$model = $model;
    $scope.$label = $label;
};

En vue d'ajouter ce qui suit :

 <input type="text"
        ng-model="selected"
        typeahead="state for state in states | filter:$viewValue"
        typeahead-editable="false"
        typeahead-on-select="onSelect($item, $model, $label)"/>

Voir le typeahead spec pour plus d'informations (recherchez onSelect).

Vérifiez si les URLs suivants vous aident http://www.techguides.in/how-to-create-autocomplete-using-angularjs-ui/

http://www.techguides.in/how-to-customize-autocomplete-to-display-multiple-columns-using-angularjs-ui-2/

Answer 2

Edit : cette méthode n'est pas la meilleure maintenant. Il est préférable d'utiliser le callback onSelect comme expliqué dans la réponse au-dessus de celle-ci.

J'ai trouvé comment faire pour faire ce que je voulais. J'ai vu qu'il existe un attribut typeahead-editable et que s'il est défini à false, la valeur sélectionnée ne change que lorsqu'une valeur du modèle est sélectionnée. Et donc le $watch fonctionne bien pour vérifier quand une nouvelle valeur est sélectionnée.

<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue" typeahead-editable="false">

link: function(scope, elm, attrs){
    scope.$watch('selected', function(newValue, oldValue) {
        if (newValue)
          console.log(oldValue+"->"+newValue);
     });
}

Answer 3

Votre code HTML devrait être le suivant

 <input id="title" type="text"  ng-model="title"  typeahead="data.enquiry_title for data in titleData | filter:$viewValue | limitTo:8" 
typeahead-on-select='onSelect($item, $model, $label)' />

ajoutez simplement typeahead-on-select dans la balise d'entrée avec la fonction de rappel.

Les éléments suivants entreraient dans le contrôleur

$scope.onSelect = function ($item, $model, $label) {
            console.log($item);
            if($item.tid)
                $scope.activeTitleId = $item.tid
        };

dans $item vous obtiendrez l'objet entier que vous avez passé dans le tableau principal de la liste de suggestions.

Answer 4

Essayez ce qui suit avant de valider

 modelCtrl.$setValidity('editable', true);