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.
Related
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
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"
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>
I am not getting how the ng-model are connected to the ng-repeat options. How can the code below be converted to an ng-repeat? I can get the ng-repeat work but
ng-selected="{{alternative.code == question.answer}}"
is what I don't understand how to do with the ng-options.
<select ng-model="question.answer">
<option ng-selected="{{alternative.code == question.answer}}"
ng-repeat="alternative in question.alternatives"
value="{{alternative.code}}">{{alternative.label}}</option>
</select>
Use the following:
<select ng-model="question.answer"
ng-options="alternative.code as alternative.label for alternative in question.alternatives">
</select>
if question.alternatives is an array and the following:
<select ng-model="question.answer"
ng-options="alternative.code as alternative.label for (key, alternative) in question.alternatives">
</select>
if it is an object. Both expressions start with the syntax value as label, which tells the <select> what to consider a value (to be bound to model) and what to use as a label (visible for users). The whole business with "this option has that value and is selected when model has it too" is then done automatically. See documentation.
<select ng-model="question.answer" ng-options="alt.code for alt in question.alternatives"></select>
modelValue as optionLabelValue for item in array if 'modelValue as' is ommited modelValue is considered as item object
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