如何通过 <option>在一个<select>列出功能，同时跟踪所选选项？

Question

I have a data structure that looks like this:

var items = [{
    name: 'someName',
    description: 'someDescription'
},
{
    name: 'someOtherName',
    description: 'someOtherDescription'
}];

And I want to present them in a select box , track which objects are selected as well as allow the user to double click on an item and pass the item to a function - so I can try do this:

<select multiple="true"
 ng-model="myModel"
 ng-options="item.name + ' ' + item.description for item in items"
 ng-dblclick="testFunction(item)">
</select>

My testFunction looks like this (in reality it's doing a little bit more than just dumping the item, but we can ignore that for the purpose of the question):

function testFunction(item) {
    console.log(item);
};

The list displays fine, however when the logging line in my testFunction() is executed, it is just printing undefined. myModel does keep track of which objects are selected.

I then tried a slightly different approach. I tried to populate the <option> list using ng-repeat:

<select multiple="true" ng-model="myModel">
    <option ng-repeat item in items" ng-dblclick="testFunction(item)">
        {{item.name}} - {{item.description}}
    </option>
</select>

Now this almost gets me over the line. My testFunction() now receives the object fine. However, now my myModel is only populating with strings of whatever is in the text part of the <option> tag.

It seems like I am unable to get both of these things happening at once.

Is anyone able to help? Let me know if you need any more information.

Answer 1

<select multiple="true" ng-model="myModel">
    <option ng-repeat="item in items" ng-dblclick="testFunction(item)"value="{{item}}">
        {{item.name}} - {{item.description}}
    </option>
</select>

You need to be setting the value attribute on the options element to the item object. otherwise it will default to whatever is being displayed.