I have simple question for AngularJS select. I'm creating select tag using array from objects.
<select data-ng-model="selectedPipeLine" name="selectedPipeLine" required="required" data-ng-options="obj.id as obj.name for obj in pipeLinesList">
</select>
{{selectedPipeLine}}
When user selected from this select the selected id obj.id is displayed near to select.
But the objects into array have other properties. How I can display other property?
{{pipeLinesList[selectedPipeLine]}} don't working.
I would appreciate any ideas and tips.
Here is jsfiddle:
http://jsfiddle.net/zono/6bpNY/2/
I want to get value of otherProperty.
Best Regards.
In your case, I think you could change your expression like this:
data-ng-options="obj.name for obj in pipeLinesList"
Your selectedPipeLine in this case is not the id, but the reference to the currently selected object => you can freely access any properties of this object. Like this:
<select data-ng-model="selectedPipeLine" name="selectedPipeLine" required="required" data-ng-options="obj.name for obj in pipeLinesList">
</select>
{{selectedPipeLine.id}}
{{selectedPipeLine.otherProperty}}
Your updated demo
Related
I'm working on angularjs app, and I can't find the answer for simple question. I've got an select with ng-options, when array that is set for options has more then one object inside the select is empty on start, but when array has only one element it automatically set it as default value. I need this select to be empty at the begining all the time, is there any solution?
in angularJS you may separate the variable used to fill in your options values and the model that stores your selected value.
See that example :
//Model used to store selected values
<select class="form-control" ng-model="myModel.country">
//I have a $scope.countries array of country
<option ng-repeat="country in countries" ng-value="country" required>{{country.name}}</option>
</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
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>
http://plnkr.co/edit/SxdjrBeUF48DrdFQuFHz?p=preview
I have a selected and I want to get the value only.
this is what I currently getting
{"_code":"AUD","description":"AUD - Australian Dollar"}
what I want to get
"AUD"
how can I accomplish this, below is my code.
<select ng-model="myModel"
ng-options="o.description for o in currencies track by o._code">
</select>
Note: I can't ng-repeat my <option> tag instead, because I am trying to edit object and I want it to be selected in the select tag.
ng-options="o._code as o.description for o in currencies"
Plunk: http://plnkr.co/edit/UZy39F4CwX8Ey8WryWVm?p=preview