web-dev-qa-db-fra.com

angular ui-bootstrap typeahead sur selectMatch?

J'utilise la typeahead angular ui-bootstrap) et j'aimerais l'utiliser comme moyen de choisir de nombreux choix. Il me faudrait donc obtenir 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, je reçois le changement chaque fois qu'une touche est enfoncé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 rappel sur cette ...

Merci !

angularjsangular-uibootstrap-typeahead
91
mchasles

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

Dans le fichier du contrôleur, ajoutez les éléments suivants:

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

En vue 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 URL suivantes 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/

248
Matt

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

J'ai trouvé comment faire ce que je voulais. J'ai constaté qu'il existe un attribut typeahead-editable et que s'il est défini sur false, la valeur sélectionnée ne change que lorsqu'une valeur du modèle est sélectionnée. Et donc, la montre $ 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);
     });
}
10
mchasles

Ce qui suit devrait être votre code HTML 

 <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 input avec la fonction de rappel.

La suite irait à l'intérieur du contrôleur 

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

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

2
Sandeep Gantait

essayez ce qui suit avant validation

 modelCtrl.$setValidity('editable', true);
0
Mohamed.Abdo