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
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"
Related
I want to bind a model value to selected item
<select id="hours" ng-model="v.T_Hour">
<option ng-repeat="n in [].constructor(24) track by $index" ng-selected="{{$index==v.T_Hour}}" value="{{$index}}">{{$index>9?$index:"0"+$index}}:00</option>
</select>
I want after the page loads , the value of the model 'v.T_Hour' to be selected in select , i assign the value of the model in the controller, when i view the resulting HTML i see that the value is selected in the HTML code ,but not selected in the select control , and the select control displays an empty item.
Try this
<select
name="name"
id="id"
ng-options="option.name for option in v.data track by option.value"
ng-model="v.selected"
class="form-control inline-forms">
<option value="" selected>{{placeHolder}}</option>
</select>
and in controller
$scope.v = {data:[], selected:{}, placeHolder:""}
$scope.v.data = [{name:"nameOne", value:"valueOne"},{name:"nameTwo", value:"valueTwo"},{name:"nameThree", value:"valueThree"}]
$scope.v.selected = $scope.v.data[0]
$scope.v.placeHolder = "Click to Select"
According Angular documentation ngOption is better way to go than ngRepeat:
Choosing between ngRepeat and ngOptions
In many cases, ngRepeat can be used on elements instead of ngOptions to achieve a similar result. However, ngOptions provides some benefits:
more flexibility in how the 's model is assigned via the select as part of the comprehension expression
reduced memory consumption by not creating a new scope for each repeated instance
increased render speed by creating the options in a documentFragment instead of individually
Specifically, select with repeated options slows down significantly starting at 2000 options in Chrome and Internet Explorer / Edge.
see: https://docs.angularjs.org/api/ng/directive/select
I have a <select> element populated with the acceptable values via ng-options and bound to a model with ng-model. It is possible that the model is set to a value that is not acceptable. (It used to be acceptable but no longer is.) In this case AngularJS renders the <select> as if it had an empty item selected.
Is there a way to have it render the selected value even if it is not listed in ng-options? I know I can put a default <option> inside the <select>. It's better than displaying an empty item, but it's a static string. I'd like to have the invalid value displayed.
Interesting problem. I think that you will be able to achieve this with the combination of ngInit directive to set up initial value (it can be missing from the allowed options list) and ngShow to hide it once valid option is selected.
Something like this:
<select
ng-init="preselected = selected"
ng-change="preselected = null"
ng-model="selected"
ng-options="item.id as item.name for item in items">
<option value="" ng-show="preselected">{{preselected}}</option>
</select>
Demo: http://plnkr.co/edit/lUTR0pHDPecU0OUUwjzt?p=preview
I have this select in AngularJS:
<select id="objectId" name="seccionId" class="form-control" ng-model="arguments.seccion" data-ng-options="item.id as item.valor for item in arguments.objects" required></select>
I like to save both values in scope, but I only save one value.
Any form to save both values?
Thanks!!!
If you want the entire value to be bound to ng-model than you can simply omit the select portion of your ng-options expression.
In this case, it's the item.id part.
data-ng-options="item.valor for item in arguments.objects"
This will ensure the entire item is bound to your ng-model when selecting.
I am assuming you want a multiple select. Have you tried using the attribute multiple:
<select id="objectId" name="seccionId" class="form-control" ng-model="arguments.seccion" multiple="true" data-ng-options="item.id as item.valor for item in arguments.objects" required></select>
How can i get the value of the selected option on the ng-change "ReadData"
Template is an array of Title, Id, and body
<select class="form-control" id="inputEmail"
ng-change="ReadData(Template.Title)"
ng-model="email.Template" name="inputEmail"
ng-options="b.Id as b.Title for b in Template">
</select>
This might work:
ng-change="ReadData(Template[$index].Title)"
Since your select is bound (by means of ngModel) to email.Template, you can access it's value from there. E.g.:
<select ... ng-change="ReadData(email.Template)" ...
Note though that, as a result of how you define ngOptions, email.Template will be bound to the teplate's id. If you want it to be bound to the whole template object itself (so you can use email.Template.Title for example), change your code like this:
<select ... ng-options="b as b.Title for b in Template"
... ng-change="ReadData(email.Template.Title)" ...
You don't need to use ng-change to get selected data, in <select> your ng-model bind will hold selected option. You can just get that value in your ng-change;
<select class="form-control" id="inputEmail"
ng-change="onOptionChange()"
ng-model="email.Template" name="inputEmail"
ng-options="b.Id as b.Title for b in Template">
</select>
Here is a JSFIDDLE
EDIT: Also if you want to entire selected Template object, change you ng-options to this:
ng-options="b.Title for b in Template"
This will assign b to email.Template, not just b.Id.
I have a drop down bound to ng-options (which uses an array of objects)
and ng-bind (which uses a string). This doesn't work because object comparison fails. Is there a workaround for this?
<select class="form-control"
ng-model="Person.Gender"
ng-options="a.name for a in dropdowns.gender">
</select>
Thanks
If I'm not mistaken what you want is to bind the name property to the person.gender property of the $scope. What you need to do is:
<select class="form-control"
ng-model="Person.Gender"
ng-options="a.name as a.name for a in dropdowns.gender">
</select>
The first part defines what is actually stored in the ng-model and the second part how is going to display, in this case both displayed value and model value are the same.
Working fiddle: jsfiddle