Question

I have an array of items:

$scope.items = [{description: "Item One", id: 1}, 
                {description: "Item Two", id: 2},
                {description: "Item Three", id: 3}]

I want the user to be able to select the item.description from a dropdown (ngOptions or typeahead), show the description in the dropdown, but bind the id to the model. I tried this (note, it's the exact same for ng-if):

typeahead="item.id as item.description for item in items"

It would seem to me that this says: "For each item in items, select the item.id, but show it it as item description." This doesn't work, once an item is selected, the dropdown/typeahead changes to the item.id along with the model: PLNKR. How do I prevent this? (Note, the model selecting id is desired behavior, the typeahead entry field changing to the item.id/model is not. I would like it to stay as item.description).

The definitive tutorial from OdeToCode didn't save me.

Answer 1

ngOptions :

<pre>Model: {{selected | json}}</pre>    
<select ng-model="selected" ng-options="item.id as item.description for item in items |
         filter:$viewValue | limitTo:8" class="form-control">
</select>

http://plnkr.co/edit/nuWMSCND7U3sZoFDZ7Gh?p=preview

typeahead :

<pre>Model: {{selected.id | json}}</pre>
<input type="text" ng-model="selected" typeahead="item as item.description for item in items |
filter:$viewValue | limitTo:8" class="form-control"/>

http://plnkr.co/edit/s1tJ8fwkqoJAIpXDeW2B?p=preview

ngOptions - How to Select an Item by Its Field?

1 个答案: