Menu
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
804
The ng-options Directive in AngularJS is used to build and bind HTML elements with options to a model property. It is used to specify <options> in a <select> list. It is designed specifically to populate the items on a dropdown list. This directive implements an array, in order to fill the dropdown list.
ng-repeat creates a new scope for each iteration so will not perform as well as ng-options. For small lists, it will not matter, but larger lists should use ng-options. Apart from that, It provides lot of flexibility in specifying iterator and offers performance benefits over ng-repeat. Save this answer.
Use ng-init to set default value for ng-options . Save this answer.
The ngInit directive allows you to evaluate an expression in the current scope. This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit : aliasing special properties of ngRepeat , as seen in the demo below.
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"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
