Setting selected values for ng-options bound select elements

Question

Fiddle with the relevant code: http://jsfiddle.net/gFCzV/7/

I'm trying to set the selected value of a drop down that is bound to a child collection of an object referenced in an ng-repeat. I don't know how to set the selected option since I can't reference the collection it's being bound to in any way that I'm aware of.

HTML:

<div ng-app="myApp" ng-controller="SomeController">
    <div ng-repeat="Person in People">
        <div class="listheader">{{Person.firstName}} {{Person.lastName}}</div>
        <div class="listitem" ng-repeat="Choice in Person.Choices">
            {{Choice.Name}}: 
            <select 
                ng-model="Choice.SelectedOption"                 
                ng-options="choice.Name for choice in Choice.Options"></select>
            {{Choice.SelectedOption.ID}}
        </div>
    </div>
</div>

JS:

var myApp = angular.module('myApp', []);
myApp.controller("SomeController", function($scope) {
    $scope.People = [{
        "firstName": "John",
        "lastName": "Doe",
        "Choices": [
            {
                "Name":"Dinner",
                "Options":[{Name:"Fish",ID:1}, {Name:"Chicken",ID:2}, {Name:"Beef",ID:3}],
                "SelectedOption":{Name:"Chicken",ID:2} //this doesn't work
            },
            {
                "Name":"Lunch",
                "Options":[{Name:"Macaroni",ID:1}, {Name:"PB&J",ID:2}, {Name:"Fish",ID:3}],
                "SelectedOption":""
            }
        ],        
    }, {
        "firstName": "Jane",
        "lastName": "Doe"
    }];
});

Is this the one case where I should actually be using ng-init with a SelectedIndex on the model?

Sublunary

For angular >= 1.2 the right answer is the @richard-houltz one. – Interpret

Answer 1

If using AngularJS 1.2 you can use 'track by' to tell Angular how to compare objects.

<select 
    ng-model="Choice.SelectedOption"                 
    ng-options="choice.Name for choice in Choice.Options track by choice.ID">
</select>

Updated fiddle http://jsfiddle.net/gFCzV/34/

Francis

The "track by" clause in the expression syntax is exactly what i was looking for. Thanks! – Borate

track by helped me on track by removing the necessity for ng-selected which can't be used with ng-options (+1) – Berkie

Oh, that weird. This also fixed my issue, but I don't understand why. Does the "choice.ID as choice.name for..." thing not work anymore ? – Wallenstein

Thanks mr Richard! :) – Waler

track by does the job! – Fireboard

Answer 2

You can use the ID field as the equality identifier. You can't use the adhoc object for this case because AngularJS checks references equality when comparing objects.

<select 
    ng-model="Choice.SelectedOption.ID" 
    ng-options="choice.ID as choice.Name for choice in Choice.Options">
</select>

Shout

This will most likely update the id of the parent entity and trigger a constraint violation exception when trying to save the child entity. The updating of the parent entity id property will make the persistence layer try to save it with another one's entity id. – Huddersfield

Answer 3

Using ng-selected for selected value. I Have successfully implemented code in AngularJS v1.3.2

<select ng-model="objBillingAddress.StateId"  >
   <option data-ng-repeat="c in States" value="{{c.StateId}}" ng-selected="objBillingAddress.BillingStateId==c.StateId">{{c.StateName}}</option>
                                                </select>

Recitative