AngularJS + UI Bootstrap Typeahead: valore di precarico dall'oggetto nel campo di immissione

Question

Sto cercando di utilizzare AngularJS + UI Bootstrap Typeahead per compilare il campo di input con l'attributo name di un oggetto mentre ho bisogno di utilizzare l'attributo id di questo oggetto quando il modulo è inviato.

Il problema è che quando provo a precaricare l'input con un valore precedentemente salvato, il valore dell'attributo id viene visualizzato all'interno dell'input anziché il valore dell'attributo name.

<input type="text" ng-model="form.product_id" typeahead="option.id as option.name for option in p.options | filter:$viewValue" /> 

Fiddle è qui: http://jsfiddle.net/honzzz/T3YFR/3/

Come faccio a precaricare i valore dell'attributo nome e ancora mantenere la funzionalità desiderata?

Answer 1

È possibile utilizzare product object come ng-model. E poi puoi semplicemente ottenere il id usando form.product.id.

Demo on jsFiddle

<div ng-controller="MyTabCtrl"> <pre>Model: {{form.product.id | json}}</pre> 
    <p>The goal is to show "Horay!" while the model is set to 1.</p> 
     <input type="text" autocomplete="off" ng-model="form.product" typeahead="option as option.name for option in p.options | filter:$viewValue" /> 
    <p>Try to write "Audi".</p> 
</div>