angularjs - 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 objectas 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>