AngularJS + UI Bootstrap Typeahead：从对象预加载到输入字段的值

Question

我正在尝试使用AngularJS + UI Bootstrap Typeahead来填充输入字段和对象的name属性，而我需要在发送表单时使用此对象的id属性。

问题在于，当我尝试使用一些先前保存的值预加载输入时 - id属性的值显示在输入内部而不是name属性的值。

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

jsFiddle

如何预加载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>