AngularJS + UI Bootstrap Typeahead：オブジェクトから入力フィールドへのプリロード値

Question

AngularJS + UI Bootstrap Typeaheadを使用して、オブジェクトの名前属性を入力フィールドに入力しようとしていますが、このオブジェクトのid属性をフォーム送信されます。

問題は、以前に保存した値で入力を事前ロードしようとすると、id属性の値がname属性の値ではなく入力内に表示されるということです。

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

フィドルはここにある：http://jsfiddle.net/honzzz/T3YFR/3/

私は、name属性の値をプリロードし、まだ所望の機能性を保つにはどうすればよいですか？

Answer 1

product objectはng-modelとして使用できます。そして、idを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>