callback di tipo typeahead angolare con ui-bootstrap su selectMatch?

Question

Sto usando il tipo angolare ui-bootstrap typeahead e vorrei usarlo come un modo per raccogliere molte scelte, quindi avrei bisogno di ottenere il valore selezionato quando viene lanciato il metodo selectMatch ma non riesco a trovare come farlo in mio controller

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

Se guardo il valore selezionato, ho ottenuto il cambio ogni volta che si preme un tasto ...

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

ho ottenuto che il metodo SelectMatch è quello che viene chiamato quando l'utente preme Invio o fai clic sulla lista ma non so come richiamare una chiamata ...

Grazie!

Answer 1

C'è un modo migliore per farlo ora. A new callback method has been added

Nel file di controllo aggiungere la seguente:

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

In considerazione aggiungere la seguente:

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

Vedere la typeahead spec per ulteriori informazioni (ricerca di onSelect).

verificare se i seguenti URL aiuta 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

Modifica: questo metodo non è il migliore ora. È meglio usare il callback onSelect come spiegato nella risposta sopra questa.

Ho trovato come faccio a fare ciò che volevo. Ho visto che c'è un attributo modificabile typeahead e se è impostato su false, il valore selezionato cambia solo quando viene selezionato un valore dal modello. E così l'orologio $ sta funzionando bene per controllare quando viene selezionato un nuovo valore.

<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

tentare di risolverli prima convalida

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

Answer 4

In seguito dovrebbe essere il codice 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)' /> 

aggiungi solo typeahead-on-select nel tag di input con la funzione di callback.

seguito sarebbe andato all'interno del controller

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

dentro $ item si otterrà l'intero oggetto, che avete superato nella matrice principale della lista suggestione