AngularJs ng-options get id

Question

This should be really simple but I don't know how to do it. I have a select control which looks like this:

<div class="form-group" ng-class="{ 'has-error' : saveForm.status.$invalid && !saveForm.status.$pristine }">
    <label class="control-label">Status</label>
    <select class="form-control" name="status" ng-options="status.name for status in controller.statuses.data track by status.id" ng-model="controller.model.data.statusId" required>
        <option value="">Select a status</option>
    </select>
</div>

the ng-model was bound to controller.model.data.status because at the time I wanted the entire object. Now I only require the selected id, so I changed the ng-model to controller.model.data.statusId and as you would expect the whole status object is now binding to that model location. How can I get it to just select the id instead of the whole object while showing the names in the select control?

codepen example as requested:

http://codepen.io/r3plica/pen/yNgLqp

Answer 1

I prefer the select as syntax from ng-options. (This does not work with track by). Specifically, I like the form select as label for value in array, which lets you change what is actually binding (select) from what is displayed (label).

From the documentation, the syntax has 4 parts:

• select this is the expression you actually want to bind to. Often it's a property of an element in the array. In your case it's status.id
• label this is the expression that determines how to display the object in the dropdown. Again, this is often a property, but it can really be any angular expression (like status.name + ': ' + status.description) In yours it's just status.name
• value is the name (alias) you want to use for a single element of the array. In yours it's status but it's just a name so you could change it to just about anything (you would have to change the select and label too).
• array is obviously the array you want to use as the dropdown data source. In yours it's controller.statuses.

In your code fully assembled:

ng-options="status.id as status.name for status in controller.statuses"