AngularJS + UI Bootstrap Typeahead: preload value from object into input field

Question

I am trying to use AngularJS + UI Bootstrap Typeahead to fill in input field with name attribute of an object while I need to use id attribute of this object when the form is sent.

The problem is that when I try to preload the input with some previously saved value - the value of id attribute is displayed inside the input instead of the value of name attribute.

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

jsFiddle

How do I preload the value of name attribute and still keep the desired functionality?

I see that it's not working in new builds of Chrome - it's not loading external scripts from github because strict MIME type checking is enabled. If you want to fiddle with it could you please use Firefox? — HonzaBé
– HonzaBé, Commented Jul 16, 2013 at 11:40

zs2020 · Accepted Answer · 2013-07-30 04:58:12Z

17

+50

You can use the product object as ng-model. And then you can simply get the id use 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>

edited Jul 30, 2013 at 4:58

answered Jul 29, 2013 at 22:18

zs2020

54.6k30 gold badges157 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS + UI Bootstrap Typeahead: preload value from object into input field

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related