typeahead utilizzando nome dell'oggetto

Question

Sto cercando di impostare un typeahead utilizzando AngularJS & UI Bootstrap in questo modo:

.html

<input type="text" ng-model="selectedStuff" typeahead="stuff.name for stuff in stuffs | filter:$viewValue"/> 

<span>{{selectedStuff.name}}</span> 
<span>{{selectedStuff.desc}}</span> 

.js

$scope.stuffs= [ 
       { 
       "name":"thing1", 
       "desc":"this is the first thing" 
       }, 
       { 
       "name":"thing2", 
       "desc":"this is the second thing" 
       } 
       ] 

Attualmente, sono stato in grado di aggiornare il modello con il nome selezionato, ma il mio obiettivo è quello di passare lungo l'intero oggetto tramite lo typeahead. C'è un modo pulito per farlo usando solo l'input?

Answer 1

Sicuro :-)

La direttiva typeahead dal http://angular-ui.github.io/bootstrap/ utilizza la stessa sintassi super-flessibile le AngularJS select directive per ng-options. Così si potrebbe scrivere:

typeahead="stuff as stuff.name for stuff in stuffs | filter:$viewValue" 

Ecco un Plunk di lavoro: http://plnkr.co/edit/5kGZkNPZ7rIFfb4Rvxej?p=preview

Answer 2

Ho avuto lo stesso problema. Ho risolto il problema con

typeahead="country.name for country in countryList | filter:$viewValue | limitTo:8" 

qui countryList è un elenco di oggetto Paese. il nome è una proprietà dell'oggetto Paese. Per me sta funzionando bene.