How to get the object of selected option in angular js using ng-repeat? Sample fiddle is here where myself populating the dropdown as,
<select ng-model="id" ng-init="id = '-1'" ng-change="select(option)">
<option value="-1">--Select--</option>
<option ng-repeat="option in list" value="{{option.id}}">{{option.name}}</option>
</select>
If someone chose option with id=1, i want to get the object {id:1, name:'A' in $scope variable.
EDIT: Myself tried with ng-options but filtering is not happening as required based on previous dropdown selection. sample fiddle
Use option object in ng-value={{option}} and whenever u select an option your scope.id will have the desired object.
Basically ur ng-model gets populated with selected value.
Just you have to change your option to this
<option ng-repeat="option in list" value="{{'Id : ' + option.id + ' Name : ' + option.name }}">{{option.name}}</option>
Hope this will work for you and you were looking for the same result
You have 2 option to get as Object.
option 1 :
you can use Filter to get Object
<select ng-model="id" ng-init="id = '-1'" ng-change="select((list|filter:{id:id}))">
<option value="-1">--Select--</option>
<option ng-repeat="option in list" value="{{option.id}}">{{option.name}}</option>
</select>
updated fiddler here
option 2 :
set your value as Object (option)
<select ng-model="id" ng-init="id = '-1'" ng-change="select(option)">
<option value="-1">--Select--</option>
<option ng-repeat="option in list" value="{{option}}">{{option.name}}</option>
</select>
Related
Angular < 1.4 works with ng-options shown as such:
<select ng-options="option.value as option.label for option in options" ng-model="selectedValue">
With the following array of options:
[{ value:"4_220588",label:"dropdown 1-test value 1"},{value:"4_220589",label:"dropdown 1-test value 2"}]
If you look at the resultant HTML is is as you would expect:
<select ng-options="option.value as option.label for option in options" ng-model="selectedValue" class="ng-pristine ng-valid ng-touched">
<option value="" class="">-- SELECT ONE --</option>
<option value="0" label="dropdown 1-test value 1">dropdown 1-test value 1</option>
<option value="1" label="dropdown 1-test value 2">dropdown 1-test value 2</option>
</select>
As soon as you change the angular version to Angular 1.4+, the option value attribute get's messed up. Here is the output with the same ng-options using a newer version of angular:
<select ng-options="option.value as option.label for option in options" ng-model="selectedValue" class="ng-pristine ng-valid ng-empty ng-touched">
<option value="" class="" selected="selected">-- SELECT ONE --</option>
<option label="dropdown 1-test value 1" value="string:4_220588">dropdown 1-test value 1</option>
<option label="dropdown 1-test value 2" value="string:4_220589">dropdown 1-test value 2</option>
</select>
What is the solution to getting the value to show up still as the index of the array?
Here is the plnkr: http://plnkr.co/edit/3CTUI9b9ntTGWhXDNQI5?p=preview
Your application logic should not be sensitive to the value attribute in the dropdown, because ng-model will set the model correctly regardless of what is output in the HTML. If you application logic does expect a specific format for this attribute, you have 3 ways to deal with this breaking change.
Use ng-repeat instead of ng-options. This is the least recommended option, as it changes the way the select lists work significantly.
Use a track by clause to enforce the key format that you are expecting, i.e. option.value as option.label for option in options track by option.value. This presumes that option.value exists and is the value you wish to represent. http://plnkr.co/edit/TSXfkpf1lhsE9QYa2NAc?p=preview
Change your application logic to expect the hashkey instead, or preferably correct the logic so that it only relies upon ng-model.
One solution would be to use ng-repeat over the options.
<select ng-model="vm.selectedValue">
<option value="" selected disabled>-- SELECT ONE --</option>
<option ng-repeat="option in options"
value="$index"
ng-selected="option === vm.selectedValue">
{{option.label}}
</option>
</select>
Here is your updated Plunkr.
This should do the trick:
<select ng-options="index as option.label for (index, option) in options2" ng-model="vm.selectedValue">
<option value="">-- SELECT ONE --</option>
</select>
On render the value of the selected option would be string:index but will output the desired value without the type included. Here is your edited plunker with the expected result in the Selected Value:
Plunker
This seems to be a really straight forward code, but I cannot figure out why it is not working.
I want to filter the 'model' dropdown by selected 'make',
Make:
<select ng-model="makeng" ng-options="option.display for option in makes">
<option ng-disabled="true" ng-selected="true" value="">Select a make</option>
</select>
Model:
<select ng-model="modelng" ng-options="option.display for option in models | filter:{make:makeng}">
<option ng-disabled="true" ng-selected="true" value="">Select a model</option>
</select>
here is the plunker
http://plnkr.co/edit/bHb9AScd2m58acUUyI0t?p=preview
Problem is with your first ngoption, you need to set the model as the value of value property using select as syntax option.value as option..
<select ng-model="makeng"
ng-options="option.value as option.display for option in makes">
Plnkr
I'd like to set the ng-class of a optiones-element as active. Unfortunately it doesn't work.
This is my option-menu:
<select>
<option ng-repeat="item in items">{{item}}</option>
</select>
and the item "one" should be active
<select>
<option ng-repeat="item in items" ng-class="{selected: item=='one'}">
{{item}}
</option>
</select>
It doesn't work. Does anyone know how to set the option tag as active?
An example of how it works is this:
<select>
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
Below is the right way "select" works in Angularjs, notice the included ng-model directive, if missing it doesn't work.
<select ng-model="selectedItemId" ng-options="item.id as item.name for item in items">
<option value="">-- choose item--</option>
</select>
to make an item of the list active, just set SelectedItemId variable assigned to ng-model at controller side.
$scope.selectedItemId = 1; //the Id belonging to the option to be selected
I see that you want to loop over the options using ng-repeat and then manually select the right option. It is nicer to use the select directive of Angular in that case:
<select ng-model="selectedItem" ng-options="items"></select>
See https://docs.angularjs.org/api/ng/directive/select for more information.
Simply trying to make a default selected value in Angular but thus far I am having no luck.
HTML Before Compile:
<select ng-options="select.Value as select.Name for select in ruleSelect" ng-model="rule.MatchLogic" ng-init="rule.MatchLogic = 0" ></select>
HTML In Browser Source:
<select ng-options="select.Value as select.Name for select in ruleSelect" ng-model="rule.MatchLogic" class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="0">All</option>
<option value="1">At Least</option>
<option value="2">At Most</option>
</select>
How do I make value=0 (All) the default selected value.
All you need to do is set your ng-model value rule.MatchLogic to equal the corresponding value in the options. The options you use are ruleSelect.
So for example, set rule.MatchLogic = ruleSelect[someSelector].Value; inside your controller.
I have the following object:
[
{"id":"150c67d4-952b-45b0-b287-f651a5f6d82b","name":"xx"},
{"id":"9001f011-3a0c-4d45-a0fb-eabb4c83ff83","name":"yy"},
{"id":"9b8b93af-cfef-451a-8dda-7373d9154f60","name":"zz"}
]
Here's my HTML:
<select
data-ng-model="option.selectedCreatedBy"
data-ng-options="item.id as item.name for item in option.userProfilesPlus">
<option style="display: none" value="">Select User</option>
</select>
The result is:
<select
data-ng-model="option.selectedCreatedBy"
data-ng-options="item.id as item.name for item in option.userProfilesPlus"
><option style="display: none" value="" class="">Select User</option>
<option value="0" selected="selected">*</option>
<option value="1">xx</option>
<option value="2">yy</option>
<option value="3">zz</option></select>
How can I make this so that the values stored are the actual id's ?
When you are using the ng-option to generate the option list, you don't have control over the values generated for options. For an array it is the index into the array.
If you want to have specific value in the option field, you have to use ng-repeat for it.
In any case, you should not be very concern about specific of html generated, angular can update model correctly in any case.