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>